import { useEffect, useState } from 'react';
import Image from 'next/image';
import apiClient from '@/api/apiClient';
import SkeletonLoader from '@/skeletons/movieCard';
import './MovieCard.css';

const MovieCard = ({ title }) => {
  const [movieData, setMovieData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMovieData = async () => {
      try {
        const data = await apiClient.getMovieCard(title);
        setMovieData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchMovieData();
  }, [title]);

  if (loading) {
    return <SkeletonLoader />;
  }

  if (error) {
    return <div className="error">Error: {error}</div>;
  }

  return (
    <div className="movie-card">
      <div className="image-container">
        <Image
          src={movieData.image}
          alt={`${movieData.title} poster`}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          priority
          className="poster"
        />
      </div>
      <div className="movie-info">
        <h3 className="movie-title">{movieData.title}</h3>
        <p className="movie-year">{movieData.year}</p>
      </div>
    </div>
  );
};

export default MovieCard;