"use client";

import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import { buttonStyles } from "@/lib/buttonStyles";

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

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-8 flex-1 shadow-md">
      {/* Title */}
      <h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
        {t("repay.supplyCollateral")}
      </h3>

      {/* Token Info and APR */}
      <div className="flex items-center justify-between h-[50px]">
        {/* Left - Token Info */}
        <div className="flex items-center gap-4">
          {/* Token Icon */}
          <div
            className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
            style={{ background: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)" }}
          >
            GY
          </div>

          {/* Amount */}
          <div className="flex flex-col">
            <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
              1,000 YTGY
            </span>
            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              $10,000.00
            </span>
          </div>
        </div>

        {/* Right - APR */}
        <div className="flex flex-col items-end">
          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
            9.1%
          </span>
          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("repay.apr")}
          </span>
        </div>
      </div>

      {/* Buttons */}
      <div className="grid grid-cols-2 gap-3">
        <Button className={buttonStyles({ intent: "theme" })}>
          {t("repay.deposit")}
        </Button>
        <Button className="rounded-xl h-11 w-full px-6 text-body-small font-bold bg-content2 text-foreground">
          {t("repay.withdraw")}
        </Button>
      </div>
    </div>
  );
}