"use client";

import { useApp } from "@/contexts/AppContext";

export default function RepayPoolStats() {
  const { t } = useApp();

  return (
    <div className="grid grid-cols-2 gap-6">
      {/* Left Card - Total Value Locked and Utilization */}
      <div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-6 flex items-center justify-between h-[98px]">
        {/* Total Value Locked */}
        <div className="flex flex-col gap-1">
          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
            {t("repay.totalValueLocked")}
          </span>
          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
            $124,592,102
          </span>
        </div>

        {/* Utilization */}
        <div className="flex flex-col gap-1">
          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase text-right">
            {t("repay.utilization")}
          </span>
          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px] text-right">
            42.8%
          </span>
        </div>
      </div>

      {/* Right Card - Reward Multiplier */}
      <div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-6 flex items-center justify-between h-[98px]">
        {/* Reward Multiplier */}
        <div className="flex flex-col gap-1">
          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
            {t("repay.rewardMultiplier")}
          </span>
          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
            2.5x
          </span>
        </div>

        {/* Overlapping Circles */}
        <div className="relative w-20 h-8">
          {/* Green Circle */}
          <div className="absolute left-0 top-0 w-8 h-8 rounded-full bg-[#00bc7d] border-2 border-white dark:border-gray-900" />

          {/* Blue Circle */}
          <div className="absolute left-6 top-0 w-8 h-8 rounded-full bg-[#2b7fff] border-2 border-white dark:border-gray-900" />

          {/* Gray Circle with +3 */}
          <div className="absolute left-12 top-0 w-8 h-8 rounded-full bg-[#e2e8f0] dark:bg-gray-600 border-2 border-white dark:border-gray-900 flex items-center justify-center">
            <span className="text-[10px] font-bold text-[#45556c] dark:text-gray-300 leading-[15px] tracking-[0.12px]">
              +3
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}