"use client";

import Image from "next/image";
import { useApp } from "@/contexts/AppContext";

interface RewardStatProps {
  label: string;
  value: string;
}

function RewardStat({ label, value }: RewardStatProps) {
  return (
    <div className="flex flex-col items-center gap-1.5">
      <span
        className="text-[24px] font-bold leading-[130%] dark:text-white"
        style={{ color: "#111827", letterSpacing: "-0.005em" }}
      >
        {value}
      </span>
      <span
        className="text-[10px] font-bold uppercase leading-[150%] text-center dark:text-gray-400"
        style={{ color: "#9ca1af", letterSpacing: "0.05em" }}
      >
        {label}
      </span>
    </div>
  );
}

export default function Season1Rewards() {
  const { t } = useApp();
  return (
    <div
      className="rounded-3xl border flex flex-col relative overflow-hidden"
      style={{
        background:
          "radial-gradient(50% 50% at 100% 0%, rgba(255, 217, 100, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%), #ffffff",
        borderColor: "rgba(255, 255, 255, 0.6)",
        paddingTop: "20px",
        paddingBottom: "20px",
        paddingLeft: "24px",
        paddingRight: "24px",
      }}
    >
      {/* Background Decoration */}
      <div
        className="absolute"
        style={{ opacity: 0.5, right: "-15px", bottom: "-20px" }}
      >
        <Image
          src="/component-113.svg"
          alt=""
          width={120}
          height={144}
        />
      </div>

      {/* Content Container */}
      <div className="flex flex-row items-center relative z-10" style={{ gap: "400px" }}>
        {/* Left: Header and Description */}
        <div className="flex flex-col gap-2 flex-shrink-0">
          {/* Header */}
          <div className="flex items-center gap-3">
            <h3
              className="text-[20px] font-bold leading-[140%] dark:text-white"
              style={{ color: "#111827" }}
            >
              {t("rewards.season1")}
            </h3>
            <div
              className="rounded-full px-2.5 py-1 flex items-center"
              style={{ backgroundColor: "#111827" }}
            >
              <span
                className="text-[10px] font-bold leading-4"
                style={{ color: "#fcfcfd" }}
              >
                {t("rewards.live")}
              </span>
            </div>
          </div>

          {/* Description */}
          <p
            className="text-body-small font-medium dark:text-gray-400"
            style={{ color: "#9ca1af" }}
          >
            {t("rewards.earnPoints")}
          </p>
        </div>

        {/* Right: Stats */}
        <div className="flex items-center justify-between flex-1">
          <RewardStat label={t("rewards.yourPoints")} value="-" />
          <RewardStat label={t("rewards.badgeBoost")} value="-" />
          <RewardStat label={t("rewards.referrals")} value="-" />
        </div>
      </div>
    </div>
  );
}