'use server';

import Image from "next/image";
import apiClient from "@/api/apiClient";
import "./Card.css";
import Link from "next/link";

const MovieCard = async ({ title }) => {
  let movieData;
  try {
    movieData = await apiClient.getMovieCard(title);
    if (!movieData) {
      return <div className="error">Movie data not found.</div>;
    }
  } catch (err) {
    return <div className="error">Error: {err.message}</div>;
  }

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

export default MovieCard;