"use client";
import { useState } from "react";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Play, CheckCircle, Clock, Star } from "lucide-react";

const courses = [
  {
    title: "Introduction to AI Tools",
    duration: "12 mins",
    rating: "4.9",
    image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800",
  },
  {
    title: "Building Your First Website",
    duration: "18 mins",
    rating: "4.8",
    image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800",
  },
  {
    title: "Digital Marketing Basics",
    duration: "15 mins",
    rating: "4.7",
    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800",
  },
  {
    title: "Creative Problem Solving",
    duration: "10 mins",
    rating: "5.0",
    image: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80&w=800",
  },
];

export function CourseDemo() {
  const [completed, setCompleted] = useState<number[]>([]);

  const toggleComplete = (id: number) => {
    if (completed.includes(id)) {
      setCompleted(completed.filter(i => i !== id));
    } else {
      setCompleted([...completed, id]);
      alert("Great job! You've earned 50 Skill Points! 🏆");
    }
  };

  return (
    <section className="py-20">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading level="h2" className="text-3xl md:text-4xl">Course Experience (Student MVP)</Heading>
          <Subheading className="mt-4">
            Real learning experience designed for high engagement and practical outcomes.
          </Subheading>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {courses.map((course, index) => (
            <div key={index} className="group bg-white rounded-2xl border border-neutral-200 overflow-hidden hover:shadow-xl transition-all">
              <div className="relative aspect-video overflow-hidden">
                <img 
                  src={course.image} 
                  alt={course.title}
                  className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg">
                    <Play className="h-6 w-6 text-blue-600 fill-blue-600" />
                  </div>
                </div>
              </div>
              <div className="p-5">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-1 text-xs text-neutral-500">
                    <Clock className="h-3 w-3" />
                    <span>{course.duration}</span>
                  </div>
                  <div className="flex items-center gap-1 text-xs text-yellow-500 font-bold">
                    <Star className="h-3 w-3 fill-yellow-500" />
                    <span>{course.rating}</span>
                  </div>
                </div>
                <h3 className="font-bold text-lg mb-4 line-clamp-1">{course.title}</h3>
                <Button 
                  onClick={() => toggleComplete(index)}
                  variant={completed.includes(index) ? "secondary" : "outline"}
                  className="w-full gap-2"
                >
                  {completed.includes(index) ? (
                    <>
                      <CheckCircle className="h-4 w-4 text-green-600" />
                      Completed
                    </>
                  ) : (
                    "Mark as Completed"
                  )}
                </Button>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}