import React from 'react';
import { useNavigate } from 'react-router-dom';

export function MangaCard({ manga }) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/manga/${manga.slug}`);
  };

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric'
    });
  };

  return (
    <div 
      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
      onClick={handleClick}
    >
      <div className="relative pb-[150%]">
        <img
          src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
          alt={manga.title}
          className="absolute inset-0 w-full h-full object-contain bg-gray-100"
        />
      </div>
      <div className="p-2">
        <h3 className="text-lg font-semibold text-gray-800 mb-1">{manga.title}</h3>
        <div className="flex items-center">
          <span className="text-sm text-gray-500">{manga.publicationYear}</span>
        </div>
        <div className="mt-1 text-sm text-gray-500">
          Added: {formatDate(manga.createdAt)}
        </div>
      </div>
    </div>
  );
}