import Image from "next/image";

interface Performer {
  rank: number;
  address: string;
  points: string;
}

const mockPerformers: Performer[] = [
  { rank: 1, address: "0x8A...2291", points: "52k" },
  { rank: 2, address: "0x11...F92A", points: "48k" },
  { rank: 3, address: "0x9C...3310", points: "41k" },
  { rank: 4, address: "0x42...119A", points: "32k" },
  { rank: 5, address: "0x77...882B", points: "28k" },
];

export default function TopPerformers() {
  const getRowStyle = (rank: number) => {
    switch (rank) {
      case 1:
        return {
          bg: "#fff5ef",
          borderColor: "#ff6900",
          rankColor: "#ff6900",
          textColor: "#111827",
          pointsSize: "text-body-large",
        };
      case 2:
        return {
          bg: "#fffbf5",
          borderColor: "#ffb933",
          rankColor: "#ffb933",
          textColor: "#111827",
          pointsSize: "text-body-large",
        };
      case 3:
        return {
          bg: "#f3f4f6",
          borderColor: "#6b7280",
          rankColor: "#6b7280",
          textColor: "#111827",
          pointsSize: "text-body-large",
        };
      default:
        return {
          bg: "transparent",
          borderColor: "transparent",
          rankColor: "#d1d5db",
          textColor: "#9ca1af",
          pointsSize: "text-body-small",
        };
    }
  };

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden h-full">
      {/* Header */}
      <div className="border-b border-[#f1f5f9] dark:border-gray-700 px-6 pt-8 pb-8">
        <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
          Top Performers
        </h3>
      </div>

      {/* Performers List */}
      <div className="flex-1 flex flex-col">
        {mockPerformers.map((performer) => {
          const style = getRowStyle(performer.rank);
          const isTopThree = performer.rank <= 3;
          const height = performer.rank <= 3 ? "h-[72px]" : "h-[68px]";

          return (
            <div
              key={performer.rank}
              className={`flex items-center justify-between px-6 ${height} border-l-4`}
              style={{
                backgroundColor: style.bg,
                borderLeftColor: style.borderColor,
              }}
            >
              {/* Left - Rank and Address */}
              <div className="flex items-center gap-5">
                {/* Rank Number */}
                <span
                  className={`font-black italic leading-[133%] ${
                    isTopThree ? "text-2xl tracking-[0.07px]" : "text-lg tracking-[-0.44px]"
                  }`}
                  style={{ color: style.rankColor }}
                >
                  {performer.rank}
                </span>

                {/* Address */}
                <span
                  className="text-body-small font-bold font-jetbrains leading-[150%]"
                  style={{ color: style.textColor }}
                >
                  {performer.address}
                </span>
              </div>

              {/* Right - Points */}
              <span
                className={`${style.pointsSize} font-bold leading-[150%]`}
                style={{
                  color: isTopThree ? "#111827" : "#4b5563",
                }}
              >
                {performer.points}
              </span>
            </div>
          );
        })}
      </div>

      {/* Footer - My Rank */}
      <div className="border-t border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
        <div className="flex items-center gap-1">
          <Image src="/icon-chart.svg" alt="Chart" width={16} height={16} />
          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            MY RANK
          </span>
        </div>
        <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
          2,450.00
        </span>
      </div>
    </div>
  );
}