import Link from "next/link";

type MangaCardProps = {
  slug: string;
  title: string;
  coverUrl: string;
  chapterCount?: number;
};

export function MangaCard({
  slug,
  title,
  coverUrl,
  chapterCount,
}: MangaCardProps) {
  return (
    <Link href={`/manga/${slug}`} className="group block">
      <div className="relative aspect-[3/4] rounded-xl overflow-hidden bg-card">
        <img
          src={coverUrl}
          alt={title}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
          loading="lazy"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
        {chapterCount !== undefined && (
          <span className="absolute top-2 right-2 px-2 py-0.5 text-[10px] font-semibold bg-accent/90 text-white rounded-full">
            {chapterCount} ch
          </span>
        )}
        <div className="absolute bottom-0 left-0 right-0 p-3">
          <h3 className="text-sm font-semibold text-white leading-tight line-clamp-2">
            {title}
          </h3>
        </div>
      </div>
    </Link>
  );
}