import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons';

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

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

  return (
    <div 
      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
      onClick={handleClick}
    >
      <div className="relative h-64">
        <img
          src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
          alt={manga.title}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
        <p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-500">{manga.publicationYear}</span>
          {manga.rating && (
            <span className="flex items-center text-yellow-500">
              <FontAwesomeIcon icon={faStar} className="mr-1" />
              {manga.rating}
            </span>
          )}
        </div>
        <div className="mt-2 flex flex-wrap gap-1">
          {manga.genres.map((genre, index) => (
            <span
              key={index}
              className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
            >
              {genre}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}