import { useEffect, useState } from "react";
import axios from "axios";
import Link from "next/link";
import { useSearchParams } from "next/navigation"; // To get the current card ID
import Image from "next/image";  // Import Image from next/image

interface SimilarCard {
  id: string;
  bank: string;
  image: string;
}

export default function SimilarCards() {
  const [similarCards, setSimilarCards] = useState<SimilarCard[]>([]);
  const searchParams = useSearchParams();
  const cardId = searchParams.get("id"); // Get the current card ID from the URL

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

    axios
      .get(`/api/similar-cards?id=${cardId}`) // Fetch related cards dynamically
      .then((res) => setSimilarCards(res.data))
      .catch((err) => console.error(err));
  }, [cardId]);

  return (
    <aside className="w-64 p-4 bg-white border-l rounded-lg shadow-md hidden lg:block">
      <h3 className="text-lg font-semibold mb-4">Similar Credit Cards</h3>
      <ul className="space-y-3">
        {similarCards.map((card) => (
          <li key={card.id}>
            <Link href={`/credit-card/${card.id}`}>
              <a className="flex items-center gap-2 text-blue-600 hover:underline">
                <Image
                  src={card.image}
                  alt={card.bank}
                  className="w-8 h-8 rounded"
                  width={32}  // Set the width and height for the image
                  height={32} // Adjust according to your design
                />
                {card.bank}
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </aside>
  );
}