import { motion } from "motion/react";
import { ChevronRight } from "lucide-react";
import { MangaCard, type Manga } from "./MangaCard";

export function MangaSection({
  title,
  subtitle,
  items,
  accent = "primary",
}: {
  title: string;
  subtitle?: string;
  items: Manga[];
  accent?: "primary" | "accent" | "neon-pink";
}) {
  const accentClass = {
    primary: "from-primary",
    accent: "from-accent",
    "neon-pink": "from-pink-500",
  }[accent];

  return (
    <section className="container mx-auto px-4 sm:px-6 py-12 md:py-16 relative">
      <div className="flex items-end justify-between mb-8">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
        >
          <div className={`h-1 w-16 rounded-full bg-gradient-to-r ${accentClass} to-transparent mb-3`} />
          <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight">
            {title}
          </h2>
          {subtitle && (
            <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
          )}
        </motion.div>
        <button className="hidden sm:flex items-center gap-1 text-sm text-muted-foreground hover:text-primary transition-colors group">
          View all
          <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
        </button>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-5">
        {items.map((m, i) => (
          <MangaCard key={m.id} manga={m} index={i} />
        ))}
      </div>
    </section>
  );
}