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 relative">
      {chapterCount !== undefined && (
        <span className="absolute -top-2 -right-2 z-10 min-w-[30px] h-[30px] flex items-center justify-center px-1.5 text-sm font-bold bg-accent text-white rounded-lg shadow-[2px_4px_12px_rgba(0,0,0,0.5),0_1px_3px_rgba(0,0,0,0.3)] border border-white/20">
          {chapterCount}
        </span>
      )}
      <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" />
        <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>
  );
}