frontend/src/components/film/card.js

import { useEffect, useState } from "react";
import { useRouter } from 'next/navigation'; // Use the correct import for Next.js 13
import apiClient from "@/api/apiClient";
import './card.css';

// Spinner component
const Spinner = () => (
  <div className="spinner">
    <div className="spinner-bounce1"></div>
    <div className="spinner-bounce2"></div>
    <div className="spinner-bounce3"></div>
  </div>
);

export default function FilmCard({ title }) {
  const [metadata, setMetadata] = useState(null);
  const router = useRouter(); // Use Next.js router

  useEffect(() => {
    const fetchMetadata = async () => {
      try {
        const response = await apiClient.getFilmMetadataByTitle(title);
        const filmData = response.data; // Adjust based on actual API response
        console.log(filmData);
        setMetadata(filmData);
      } catch (error) {
        console.error("Failed to fetch metadata:", error);
        setMetadata({ error: "Failed to load metadata" });
      }
    };

    fetchMetadata();
  }, [title]);

  const handleCardClick = () => {
    router.push(`/film/${title}`); // Use Next.js router
  };

  const findEnglishTranslation = (translations) => {
    if (translations && Array.isArray(translations.nameTranslations)) {
      const primaryEngTranslation = translations.nameTranslations.find(
        translation => translation.language === 'eng' && translation.isPrimary
      );

      if (primaryEngTranslation) {
        return primaryEngTranslation.name;
      }

      const engTranslation = translations.nameTranslations.find(
        translation => translation.language === 'eng'
      );

      if (engTranslation) {
        return engTranslation.name;
      }
    }
    return null;
  };

  const eng_title = metadata?.translations ? 
    (findEnglishTranslation(metadata.translations) || `${metadata?.name} (${metadata?.year})`) : 
    `${metadata?.name} (${metadata?.year})` || title;
  
  const imageUrl = metadata?.artworks?.find(artwork => artwork.type === 14)?.thumbnail || "";
  const year = metadata?.year;

  if (metadata === null)
    return (
      <div className="film-card loading">
        <Spinner />
        <div className="film-card-title">Loading...</div>
      </div>
    );

  if (metadata.error)
    return (
      <div className="film-card error">
        <p className="film-card-title">Error loading metadata</p>
      </div>
    );

  return (
    <div className="film-card" onClick={handleCardClick}>
      <img src={imageUrl} alt={eng_title} className="film-card-image" />
      <div className="film-card-overlay"></div>
      <div className="film-card-info">
        <p className="film-card-title">{eng_title}</p>
        <p className="film-card-year">{year}</p>
      </div>
    </div>
  );
}