"use client";

import { useEffect, useState } from "react";
import Filter from "@/components/customui/Filter";
import Card from "@/components/customui/Card";
interface Feature {
  id: number;
  details: string;
}

interface Offer {
  id: number;
  details: string;
}
interface CreditCard {
  id: number;
  name: string;
  bankname: string;
  minSalary: number;// it's a number in API, change this to `number`
  annualFee: string; // Add this property
  image: string;     // Add this property
  features: Feature[];
  offers: Offer[];  // Add this property
}

const Page = () => {
  const [cards, setCards] = useState<CreditCard[]>([]);
  const [filteredCards, setFilteredCards] = useState<CreditCard[]>([]);
  const [selectedFilters, setSelectedFilters] = useState<{ banks: string[]; features: string[]; salary: string }>({
    banks: [],
    features: [],
    salary: "50000",
  });

  useEffect(() => {
    fetch("/api/cardlists/")
      .then((res) => res.json())
      .then((data: CreditCard[]) => {
        setCards(data);
        setFilteredCards(data);
      })
      .catch((err) => console.error("API Fetch Error:", err));
  }, []);

  useEffect(() => {
    const filtered = cards.filter((card: CreditCard) => {
      return (
        (selectedFilters.banks.length === 0 || selectedFilters.banks.includes(card.bankname)) &&
        (selectedFilters.features.length === 0 ||
          selectedFilters.features.some((feature) => card.features.includes(feature))) &&
        (card.minSalary <= parseInt(selectedFilters.salary))
      );
    });

    setFilteredCards(filtered);
  }, [selectedFilters, cards]);

  return (
    <div className="flex gap-4 p-6">
      <Filter selectedFilters={selectedFilters} setSelectedFilters={setSelectedFilters} />

      <div className="flex-1">
        <h1 className="text-2xl font-bold mb-4">Most Popular Credit Cards in UAE</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {filteredCards.map((card) => (
            // <Card key={card.id} card={card} />
            <Card key={card.id ?? card.name} card={card} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Page;



 {filteredCards.map((card, index) => (
              <Card key={card.id ?? `${card.name}-${index}`} card={card} />
            ))}