import Image from "next/image";

interface RoleIndicator {
  icon: string;
  label: string;
  current: number;
  total: number;
}

interface TeamTVLCardProps {
  currentTVL: string;
  totalTVL: string;
  progressPercent: number;
  members: number;
  roles: RoleIndicator[];
}

export default function TeamTVLCard({
  currentTVL = "$8.5M",
  totalTVL = "$10M",
  progressPercent = 85,
  members = 12,
  roles = [
    { icon: "/icon-whale.svg", label: "Whales", current: 3, total: 3 },
    { icon: "/icon-trader.svg", label: "Traders", current: 0, total: 3 },
    { icon: "/icon-user.svg", label: "Users", current: 5, total: 3 },
  ],
}: TeamTVLCardProps) {
  return (
    <div className="flex-[32] bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6 relative">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Image src="/icon0.svg" alt="" width={24} height={24} />
        <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
          Team TVL Reward
        </span>
      </div>

      {/* Description */}
      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
        Were you invited? Enter the code here to boost your base yield by +0.5%.
      </p>

      {/* Progress Section */}
      <div className="flex flex-col gap-4">
        {/* TVL Info */}
        <div className="flex flex-col gap-1">
          <div className="flex items-start justify-between">
            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              CURRENT TEAM TVL
            </span>
            <span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
              {currentTVL} / {totalTVL}
            </span>
          </div>

          {/* Progress Bar */}
          <div className="relative w-full h-2 bg-[#f3f4f6] dark:bg-gray-700 rounded-full overflow-hidden">
            <div
              className="absolute left-0 top-0 h-full rounded-full"
              style={{
                width: `${progressPercent}%`,
                background: "linear-gradient(90deg, rgba(20, 71, 230, 1) 0%, rgba(3, 43, 189, 1) 100%)"
              }}
            />
          </div>
        </div>

        {/* Role Indicators */}
        <div className="flex items-center gap-2">
          {roles.map((role, index) => (
            <div
              key={index}
              className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-2 flex flex-col items-center justify-center gap-0"
            >
              <div className="flex items-center justify-center h-4">
                <Image src={role.icon} alt={role.label} width={16} height={16} />
              </div>
              <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                {role.label}
              </span>
              <span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
                {role.current}/{role.total}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Members Badge */}
      <div className="absolute right-6 top-8 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
        <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
          {members} Members
        </span>
      </div>
    </div>
  );
}