"use client";

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

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

  const regions = [
    {
      countryKey: "transparency.unitedStates",
      regionKey: "transparency.northAmerica",
      value: "$305,000,000",
      percentage: "65.6%",
      flag: "/lr0.svg",
    },
    {
      countryKey: "transparency.hongKong",
      regionKey: "transparency.asiaPacific",
      value: "$160,000,000",
      percentage: "34.4%",
      flag: "/container14.svg",
    },
  ];

  return (
    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
      {/* Header */}
      <div className="flex flex-col gap-0">
        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
          {t("transparency.geographicAllocation")}
        </h3>
        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {t("transparency.geographicSubtitle")}
        </p>
      </div>

      {/* Region Cards */}
      <div className="flex flex-col gap-4">
        {regions.map((region, index) => (
          <div
            key={index}
            className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
          >
            {/* Left - Flag and Location */}
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 flex-shrink-0 flex items-center justify-center">
                <Image
                  src={region.flag}
                  alt={t(region.countryKey)}
                  width={48}
                  height={48}
                  className="w-full h-full object-contain"
                />
              </div>
              <div className="flex flex-col">
                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                  {t(region.countryKey)}
                </span>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t(region.regionKey)}
                </span>
              </div>
            </div>

            {/* Right - Value and Percentage */}
            <div className="flex flex-col items-end">
              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                {region.value}
              </span>
              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                {region.percentage}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}