"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
// import CardDetails from "@/components/customui/CardDetails";

interface CardData {
  id: number;
  title: string;
  logo: string;
  image: string;
  details: { label: string; value: string }[];
  benefits: string[];
  creditcarddetails?: {
    benefitid: number;
    benefitdetails: string;
    benfitcatgory: string;
  }[];
}

const CardPage = () => {
  const { id } = useParams();
  const [cardData, setCardData] = useState<CardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;

    const fetchCardData = async () => {
      try {
        const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://banksfinders.com';
        const url = `${baseUrl}/api/carddetails/${id}`;
        console.log("[INFO] Fetching card data from:", url);

        const response = await fetch(url);
        if (!response.ok) {
          console.error("[ERROR] API response not OK:", response.status);
          setError("Something went wrong or invalid card ID");
          return;
        }

        const data: CardData = await response.json();
        if (!data || !data.title || !Array.isArray(data.details)) {
          console.error("[ERROR] Invalid data format received:", data);
          setError("Invalid card data format");
          return;
        }

        setCardData(data);
      } catch (err) {
        console.error("[ERROR] Fetch failed:", err);
        setError("An error occurred while loading card details.");
      } finally {
        setLoading(false);
      }
    };

    fetchCardData();
  }, [id]);

  if (loading) return <p className="text-center mt-10">Loading...</p>;
  if (error) return <p className="text-center text-red-500">{error}</p>;
  if (!cardData) return null;
return<p className="text-center mt-10">dhananjay...</p>;
  // return <CardDetails {...cardData} />;
};

export default CardPage;