"use client";

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

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

  // Mini bar chart data (heights in percentage)
  const chartBars = [
    { height: 40, color: "#f2fcf7" },
    { height: 55, color: "#e1f8ec" },
    { height: 45, color: "#cef3e0" },
    { height: 65, color: "#b8ecd2" },
    { height: 80, color: "#00ad76" },
    { height: 95, color: "#10b981" },
  ];

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex items-center gap-6 h-[180px]">
      {/* Left Section - USDC Borrowed and Avg. APY */}
      <div className="flex items-center gap-12 flex-1">
        {/* USDC Borrowed */}
        <div className="flex flex-col gap-1">
          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("lending.usdcBorrowed")}
          </span>
          <span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
            $125.2M
          </span>
          <div className="flex items-center gap-1">
            <Image src="/icon0.svg" alt="" width={14} height={14} />
            <span className="text-[12px] font-medium text-[#10b981] dark:text-green-400 leading-[16px]">
              +12% {t("lending.vsLastMonth")}
            </span>
          </div>
        </div>

        {/* Divider */}
        <div className="w-px h-12 bg-border-gray dark:bg-gray-600" />

        {/* Avg. APY */}
        <div className="flex flex-col gap-1">
          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("lending.avgApy")}
          </span>
          <span className="text-heading-h2 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.01em]">
            20.5%
          </span>
          <div className="flex items-center h-4">
            <span className="text-[12px] font-regular text-text-tertiary dark:text-gray-400 leading-[16px]">
              {t("lending.stableYield")}
            </span>
          </div>
        </div>
      </div>

      {/* Right Section - Mini Chart */}
      <div className="flex items-end gap-1 w-48 h-16">
        {chartBars.map((bar, index) => (
          <div
            key={index}
            className="flex-1 rounded-t-md transition-all"
            style={{
              backgroundColor: bar.color,
              height: `${bar.height}%`,
            }}
          />
        ))}
      </div>
    </div>
  );
}