frontend/src/components/shared/Card/TvShowCard.js

'use server';

import Image from 'next/image';
import apiClient from '@/api/apiClient';
import SkeletonLoader from '@/skeletons/Card/movieCard';
import Link from 'next/link';
import './Card.css';

const TvShowCard = async ({ title }) => {
  // Fetch movie data directly in the server component
  let movieData;
  let error = null;

  try {
    movieData = await apiClient.getSeriesCard(title);
  } catch (err) {
    error = err.message;
  }

  // If loading or movieData is not available, show skeleton loader
  if (!movieData) {
    return <SkeletonLoader />;
  }

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

  return (
    <Link href={`/tvshow/${title}`}>
    <div className="movie-card">
      <div className="movie-card-image-container">
        <Image
          src={movieData.image}
          alt={`${movieData.title} poster`}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 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 TvShowCard;