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 ; } if (error) { return
Error: {error}
; } return (
{`${movieData.title}

{movieData.title}

{movieData.year}

); }; export default MovieCard;