"use client";

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

interface OverviewItemProps {
  icon: string;
  label: string;
  value: string;
}

function OverviewItem({ icon, label, value }: OverviewItemProps) {
  return (
    <div className="flex items-center justify-between w-full">
      <div className="flex items-center gap-1">
        <div className="w-5 h-6 flex-shrink-0">
          <Image src={icon} alt={label} width={20} height={24} />
        </div>
        <span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
          {label}
        </span>
      </div>
      <span className="text-body-small font-medium text-text-primary dark:text-white">
        {value}
      </span>
    </div>
  );
}

export default function AssetOverviewCard() {
  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-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h3 className="text-body-large font-bold text-text-primary dark:text-white">
          {t("assetOverview.title")}
        </h3>
        <div
          className="rounded-full border flex items-center gap-2 px-3 py-1.5"
          style={{
            backgroundColor: "#fffbf5",
            borderColor: "#ffedd5",
          }}
        >
          <div
            className="w-1.5 h-1.5 rounded-full flex-shrink-0"
            style={{ backgroundColor: "#ffb933" }}
          />
          <span
            className="text-xs font-semibold leading-4"
            style={{ color: "#ffb933" }}
          >
            {t("assetOverview.mediumRisk")}
          </span>
        </div>
      </div>

      {/* Overview Items */}
      <div className="flex gap-12 w-full">
        <div className="flex-1 flex flex-col gap-5">
          <OverviewItem
            icon="/component-11.svg"
            label={t("assetOverview.underlyingAssets")}
            value={t("assetOverview.usEquityIndex")}
          />
          <OverviewItem
            icon="/component-12.svg"
            label={t("assetOverview.maturityRange")}
            value="05 Feb 2026"
          />
          <OverviewItem
            icon="/component-13.svg"
            label={t("assetOverview.cap")}
            value="$50,000,000"
          />
        </div>
        <div className="flex-1 flex flex-col gap-5">
          <OverviewItem
            icon="/component-14.svg"
            label={t("assetOverview.minInvestment")}
            value="100 USDC"
          />
          <div className="flex flex-col gap-3 w-full">
            <OverviewItem
              icon="/component-15.svg"
              label={t("assetOverview.poolCapacity")}
              value="75%"
            />
            <div className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
              <div className="h-full bg-blue-500 rounded-full" style={{ width: "75%" }} />
            </div>
          </div>
        </div>
      </div>

      {/* Divider */}
      <div className="border-t border-border-gray dark:border-gray-700" />

      {/* Current Price */}
      <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Image src="/component-16.svg" alt="Price" width={24} height={24} />
          <span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
            {t("assetOverview.currentPrice")}
          </span>
        </div>
        <div className="text-[20px] font-bold leading-[140%]">
          <span className="text-text-primary dark:text-white">1 GY-US = </span>
          <span style={{ color: "#10b981" }}>1.04 USDC</span>
        </div>
      </div>
    </div>
  );
}