assetx/components/fundmarket/ProductCardList.tsx

"use client";

import Image from "next/image";
import { Button, Card, CardBody } from "@heroui/react";
import { buttonStyles } from "@/lib/buttonStyles";

interface ProductCardListProps {
  name: string;
  category: string;
  categoryColor: "orange" | "green" | "blue" | "purple" | "red";
  iconType: "us-flag-1" | "hk-flag" | "us-flag-2" | "sg-flag" | "uk-flag";
  poolCap: string;
  lockUp: string;
  poolCapacityPercent: number;
  onInvest?: () => void;
}

export default function ProductCardList({
  name,
  category,
  categoryColor,
  iconType,
  poolCap,
  lockUp,
  poolCapacityPercent,
  onInvest,
}: ProductCardListProps) {
  const getIconSrc = () => {
    switch (iconType) {
      case "us-flag-1":
      case "hk-flag":
      case "us-flag-2":
      default:
        return "/lr0.svg";
    }
  };

  const getIconBg = () => {
    switch (categoryColor) {
      case "orange":
        return "bg-orange-50 dark:bg-orange-900/20";
      case "green":
        return "bg-green-50 dark:bg-green-900/20";
      case "blue":
        return "bg-blue-50 dark:bg-blue-900/20";
      case "purple":
        return "bg-purple-50 dark:bg-purple-900/20";
      case "red":
        return "bg-red-50 dark:bg-red-900/20";
      default:
        return "bg-orange-50 dark:bg-orange-900/20";
    }
  };

  return (
    <Card className="bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700">
      <CardBody className="py-6 px-8">
        <div className="flex flex-row items-center justify-between">
          {/* Icon and Title - Fixed width */}
          <div className="flex flex-row gap-4 items-center justify-start w-[280px] flex-shrink-0">
            <div
              className={`${getIconBg()} rounded-md border-[0.75px] border-black/10 dark:border-white/10 w-10 h-[30px] relative shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.05)] overflow-hidden flex items-center justify-center flex-shrink-0`}
            >
              <Image
                src={getIconSrc()}
                alt={name}
                width={43}
                height={30}
                className="w-[107.69%] h-full object-cover"
              />
            </div>
            <div className="flex flex-col gap-0.5 items-start min-w-0 flex-1">
              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
                {category}
              </div>
              <div className="text-text-primary dark:text-white text-body-default font-bold font-inter truncate w-full">
                {name}
              </div>
            </div>
          </div>

          {/* Middle section with stats - evenly distributed */}
          <div className="flex flex-row items-center justify-between flex-1 px-12">
            {/* Lock-up */}
            <div className="flex flex-col gap-1 items-start w-[120px] flex-shrink-0">
              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
                Lock-up
              </div>
              <div className="text-text-primary dark:text-white text-body-small font-bold font-inter">
                {lockUp}
              </div>
            </div>

            {/* Pool Cap */}
            <div className="flex flex-col gap-1 items-start w-[100px] flex-shrink-0">
              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
                Pool Cap
              </div>
              <div className="text-green-500 dark:text-green-400 text-body-small font-bold font-inter">
                {poolCap}
              </div>
            </div>

            {/* Pool Capacity */}
            <div className="flex flex-col gap-1 items-start w-[260px] flex-shrink-0">
              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
                Pool Capacity
              </div>
              <div className="flex flex-row gap-3 items-center">
                <div className="bg-gray-100 dark:bg-gray-700 rounded-full w-24 h-2 relative overflow-hidden flex-shrink-0">
                  <div
                    className="rounded-full h-2"
                    style={{
                      background:
                        "linear-gradient(90deg, rgba(20, 71, 230, 1) 0%, rgba(3, 43, 189, 1) 100%)",
                      width: `${poolCapacityPercent}%`,
                    }}
                  />
                </div>
                <div className="text-text-primary dark:text-white text-body-small font-bold font-inter whitespace-nowrap">
                  {poolCapacityPercent}% Filled
                </div>
              </div>
            </div>
          </div>

          {/* Invest Button */}
          <div className="flex-shrink-0">
            <Button
              color="default"
              variant="solid"
              onPress={onInvest}
              className={buttonStyles({ intent: "theme" })}
            >
              Invest
            </Button>
          </div>
        </div>
      </CardBody>
    </Card>
  );
}