import { motion } from "framer-motion";
import { SCHEDULE } from "@/data/event-data";
import { Clock, Music, Coffee, Star } from "lucide-react";

const typeIcon: Record<string, typeof Clock> = {
  workshop: Clock,
  social: Music,
  break: Coffee,
  show: Star,
};

const typeColor: Record<string, string> = {
  workshop: "border-primary bg-primary/10 text-primary",
  social: "border-secondary bg-secondary/10 text-secondary",
  break: "border-muted-foreground bg-muted text-muted-foreground",
  show: "border-accent bg-accent/10 text-accent",
};

const ScheduleSection = () => (
  <section id="schedule" className="section-padding bg-card">
    <div className="container mx-auto">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        className="text-center mb-12"
      >
        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
          Programa
        </h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Tres días de workshops, shows y social dance.
        </p>
      </motion.div>

      <div className="grid md:grid-cols-3 gap-8">
        {SCHEDULE.map((day, di) => (
          <motion.div
            key={day.day}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: di * 0.15 }}
          >
            <h3 className="font-display text-xl font-bold text-foreground mb-6 pb-3 border-b-2 border-primary">
              {day.day}
            </h3>
            <div className="space-y-3">
              {day.events.map((event, ei) => {
                const Icon = typeIcon[event.type] || Clock;
                return (
                  <div
                    key={ei}
                    className={`flex items-start gap-3 p-3 rounded-lg border-l-4 ${
                      typeColor[event.type] || ""
                    }`}
                  >
                    <Icon className="w-4 h-4 mt-0.5 shrink-0" />
                    <div>
                      <p className="text-xs font-medium opacity-70">{event.time}</p>
                      <p className="text-sm font-semibold">{event.title}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

export default ScheduleSection;