"use client";

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

export default function RepayStats() {
  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 h-[249px] shadow-md">
      {/* Stats Info */}
      <div className="flex flex-col gap-6 h-[120px]">
        {/* NET APR */}
        <div className="flex items-center justify-between h-7">
          <div className="flex items-center gap-2">
            <Image src="/icon0.svg" alt="" width={18} height={18} />
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
              {t("repay.netApr")}
            </span>
          </div>
          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
            3%
          </span>
        </div>

        {/* Liq.price/offset */}
        <div className="flex items-center justify-between h-7">
          <div className="flex items-center gap-2">
            <Image src="/icon1.svg" alt="" width={18} height={18} />
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
              {t("repay.liqPriceOffset")}
            </span>
          </div>
          <div className="flex items-center gap-1">
            <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
              $0.938
            </span>
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
              / 20%
            </span>
          </div>
        </div>

        {/* Position Health */}
        <div className="flex items-center justify-between h-7">
          <div className="flex items-center gap-2">
            <Image src="/icon2.svg" alt="" width={18} height={18} />
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
              {t("repay.positionHealth")}
            </span>
          </div>
          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
            Safe 50%
          </span>
        </div>
      </div>

      {/* Progress Bar */}
      <div className="w-full">
        <div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className="h-full bg-[#10b981] dark:bg-green-500 rounded-full"
            style={{ width: "50%" }}
          />
        </div>
      </div>
    </div>
  );
}