"use client";

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

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

  const stats = [
    {
      label: t("lending.totalUsdcSupply"),
      value: "$200.4M",
      valueColor: "text-text-primary dark:text-white",
    },
    {
      label: t("lending.utilization"),
      value: "65%",
      valueColor: "text-[#10b981] dark:text-green-400",
    },
    {
      label: t("lending.activeLoans"),
      value: "3",
      valueColor: "text-text-primary dark:text-white",
    },
  ];

  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-6">
      {/* Title Section */}
      <div className="flex flex-col gap-0">
        <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
          {t("lending.title")}
        </h1>
        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {t("lending.subtitle")}
        </p>
      </div>

      {/* Stats Cards */}
      <div className="flex gap-4 w-full">
        {stats.map((stat, index) => (
          <div
            key={index}
            className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-2"
          >
            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              {stat.label}
            </span>
            <span className={`text-heading-h2 font-bold leading-[130%] tracking-[-0.01em] ${stat.valueColor}`}>
              {stat.value}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}