"use client"
import { motion } from "framer-motion";
import { GraduationCap, ChevronRight } from "lucide-react";
import SectionHeading from "./SectionHeading";
import Image from "next/image";
import type { HomeTraining } from "@/services/pages/public/home";

interface TrainingProps {
  heading?: string;
  subtitle?: string;
  imageUrl?: string;
  trainings?: HomeTraining[];
}

const Training = ({
  heading,
  subtitle,
  imageUrl,
  trainings = [],
}: TrainingProps) => {
  return (
    <section id="training" className="petro-section bg-secondary">
      <div className="petro-container">
        <SectionHeading
          title={heading}
          subtitle={subtitle}
        />
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative rounded-sm overflow-hidden h-80 lg:h-[450px]"
          >
            {imageUrl && (
              <Image src={imageUrl} width={600} height={400} alt="Training center" className="w-full h-full object-cover" />
            )}
            <div className="absolute inset-0 bg-gradient-to-t from-primary/60 to-transparent" />
          </motion.div>

          <div className="space-y-4">
            {trainings.map((training, i) => (
              <motion.div
                key={training.training_title}
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1, duration: 0.4 }}
                className="petro-card p-6 flex items-center gap-4 group cursor-pointer"
                onClick={() => training.training_link && window.open(training.training_link, "_blank")}
              >
                <div className="p-3 bg-secondary rounded-sm text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
                  <GraduationCap size={22} />
                </div>
                <span className="font-semibold text-foreground flex-1">{training.training_title}</span>
                <ChevronRight size={18} className="text-accent opacity-0 group-hover:opacity-100 transition-opacity" />
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Training;