import { motion } from "motion/react";
import { Star, Eye, Lock } from "lucide-react";

export interface Manga {
  id: string;
  title: string;
  cover: string;
  genre: string;
  rating: number;
  views: string;
  price?: string;
  isFree?: boolean;
}

export function MangaCard({ manga, index = 0 }: { manga: Manga; index?: number }) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5, delay: index * 0.05 }}
      whileHover={{ y: -6 }}
      className="group relative cursor-pointer"
    >
      <div className="relative overflow-hidden rounded-xl glass border border-primary/20 group-hover:border-primary/60 transition-all duration-300">
        <div className="aspect-[2/3] overflow-hidden">
          <img
            src={manga.cover}
            alt={manga.title}
            loading="lazy"
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
        </div>

        <div className="absolute top-3 left-3 flex gap-2">
          {manga.isFree ? (
            <span className="px-2 py-0.5 text-[10px] font-bold tracking-widest rounded-md bg-accent/20 backdrop-blur text-accent border border-accent/40">
              FREE
            </span>
          ) : (
            <span className="px-2 py-0.5 text-[10px] font-bold tracking-widest rounded-md bg-primary/20 backdrop-blur text-primary border border-primary/40 flex items-center gap-1">
              <Lock className="w-2.5 h-2.5" /> {manga.price}
            </span>
          )}
        </div>

        <div className="absolute top-3 right-3 flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold rounded-md glass-strong">
          <Star className="w-2.5 h-2.5 text-yellow-400 fill-yellow-400" />
          {manga.rating}
        </div>

        <div className="absolute bottom-0 left-0 right-0 p-4">
          <p className="text-[10px] tracking-[0.2em] text-accent font-bold uppercase mb-1">
            {manga.genre}
          </p>
          <h3 className="font-display text-base font-bold leading-tight mb-2 line-clamp-2 group-hover:text-primary transition-colors">
            {manga.title}
          </h3>
          <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
            <span className="flex items-center gap-1">
              <Eye className="w-3 h-3" /> {manga.views}
            </span>
          </div>
        </div>

        <div className="absolute inset-0 bg-gradient-to-t from-primary/0 via-primary/0 to-primary/0 group-hover:from-primary/10 transition-all duration-500 pointer-events-none" />
      </div>
    </motion.article>
  );
}