// components/customui/CardCompare.tsx
'use client';

import { useEffect, useState } from "react";
import CardCompareItem from "@/components/customui/CardCompareItem";

interface CardOption {
  id: number;
  name: string;
  bankname: string;
  minSalary: string;
  annualFee: string;
  image: string;
  ccurl: string;
}

export default function CardCompare() {
  const [cards, setCards] = useState<CardOption[]>([]);
  const [selectedCardCcurrls, setSelectedCardCcurrls] = useState<(string | null)[]>([null, null, null]);

  useEffect(() => {
    const fetchCardOptions = async () => {
      try {
        const res = await fetch("/api/cards/list");
        const data = await res.json();
        if (Array.isArray(data)) {
          setCards(data);
        } else if (data && Array.isArray(data.cards)) {
          setCards(data.cards);
        } else {
          setCards([]);
        }
      } catch {
        setCards([]);
      }
    };
    fetchCardOptions();
  }, []);

  const handleSelectCard = (idx: number, ccurl: string) => {
    const updated = [...selectedCardCcurrls];
    updated[idx] = ccurl || null;
    setSelectedCardCcurrls(updated);
  };

  return (
    <div className="p-6">
      <div className="border-2 border-blue-300 rounded-2xl shadow grid grid-cols-1 md:grid-cols-3 gap-6 bg-white">
        {[0, 1, 2].map((idx) => (
          <CardCompareItem
            key={idx}
            cards={cards}
            selectedCardCcurl={selectedCardCcurrls[idx]}
            onSelectCard={(ccurl) => handleSelectCard(idx, ccurl)}
          />
        ))}
      </div>
    </div>
  );
}