"use client";

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

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

  const stats = [
    {
      label: t("stats.totalValueLocked"),
      value: "$465.0M",
      isGreen: false,
    },
    {
      label: t("alp.price"),
      value: "$1.23",
      isGreen: false,
    },
    {
      label: t("alp.poolAPR"),
      value: "27.36%",
      isGreen: true,
    },
    {
      label: t("alp.rewardAPR"),
      value: "8.23%",
      isGreen: true,
    },
  ];

  return (
    <div className="grid grid-cols-[1fr_1fr_1fr_1fr] gap-4">
      {stats.map((stat, index) => (
        <div
          key={index}
          className="bg-bg-subtle dark:bg-gray-800 rounded-2xl border border-border-gray dark:border-gray-700 px-6 py-4 flex flex-col gap-2"
        >
          <div className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400">
            {stat.label}
          </div>
          <div className={`text-[32px] font-bold leading-[130%] tracking-[-0.01em] ${stat.isGreen ? 'text-[#10b981]' : 'text-text-primary dark:text-white'}`}>
            {stat.value}
          </div>
        </div>
      ))}
    </div>
  );
}