"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { QuizCard } from "@/components/quiz/QuizCard";
import type { QuizWithRelations } from "@/types";

interface FeaturedQuizzesProps {
  quizzes: QuizWithRelations[];
}

const MOCK_QUIZZES = [
  {
    id: "1", slug: "pengetahuan-umum-dasar", title: "Pengetahuan Umum Dasar",
    description: "Uji pengetahuan umum kamu dengan 20 pertanyaan pilihan.", difficulty: "EASY",
    timeLimit: 30, playCount: 15420, avgScore: 78,
    category: { name: "Pengetahuan Umum", icon: "🌍", color: "#6366f1" },
    author: { name: "QuizB Team", image: null },
    _count: { questions: 20, results: 15420 },
    thumbnail: null,
  },
  {
    id: "2", slug: "fiqih-ibadah", title: "Fiqih Ibadah Sehari-hari",
    description: "Soal-soal tentang tata cara ibadah dalam Islam.", difficulty: "MEDIUM",
    timeLimit: 30, playCount: 8930, avgScore: 65,
    category: { name: "Agama", icon: "☪️", color: "#10b981" },
    author: { name: "Ustadz Ahmad", image: null },
    _count: { questions: 25, results: 8930 },
    thumbnail: null,
  },
  {
    id: "3", slug: "matematika-smp", title: "Matematika SMP Kelas 8",
    description: "Latihan soal matematika tingkat SMP.", difficulty: "HARD",
    timeLimit: 45, playCount: 5210, avgScore: 55,
    category: { name: "Matematika", icon: "🔢", color: "#f59e0b" },
    author: { name: "Pak Budi", image: null },
    _count: { questions: 30, results: 5210 },
    thumbnail: null,
  },
];

export function FeaturedQuizzes({ quizzes }: FeaturedQuizzesProps) {
  const displayQuizzes = quizzes.length > 0 ? quizzes : MOCK_QUIZZES;

  return (
    <section className="py-24 bg-muted/20">
      <div className="container mx-auto px-4">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="flex items-end justify-between mb-12"
        >
          <div>
            <span className="text-sm font-semibold text-primary uppercase tracking-widest">
              Trending Sekarang
            </span>
            <h2 className="text-4xl md:text-5xl font-bold mt-2">
              Quiz Terpopuler
            </h2>
          </div>
          <Link
            href="/explore"
            className="hidden md:flex items-center gap-2 text-sm font-semibold text-primary hover:gap-3 transition-all"
          >
            Lihat Semua
            <ArrowRight className="w-4 h-4" />
          </Link>
        </motion.div>

        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {displayQuizzes.slice(0, 6).map((quiz, i) => (
            <QuizCard key={quiz.id} quiz={quiz} index={i} />
          ))}
        </div>

        {/* Mobile CTA */}
        <div className="mt-8 text-center md:hidden">
          <Link
            href="/explore"
            className="inline-flex items-center gap-2 px-6 py-3 gradient-brand text-white font-semibold rounded-xl text-sm"
          >
            Lihat Semua Quiz
            <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}