"use client"
import { motion } from "framer-motion";
import SectionHeading from "./SectionHeading";
import Image from "next/image";
import Link from "next/link";
import type { HomeTechnology } from "@/services/pages/public/home";

interface TechnologiesProps {
  heading?: string;
  subtitle?: string;
  technologies?: HomeTechnology[];
}

const Technologies = ({
  heading,
  subtitle,
  technologies = [],
}: TechnologiesProps) => {
  return (
    <section id="technologies" className="petro-section bg-primary">
      <div className="petro-container">
        <SectionHeading
          light
          title={heading}
          subtitle={subtitle}
        />
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {technologies.map((tech, i) => (
            <Link key={tech.slug} href={`/technologies#${tech.slug}`}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              whileHover={{ y: -10 }}
              className="relative h-80 group overflow-hidden cursor-pointer rounded-sm"
            >
              <Image
                src={tech.image_path}
                alt={tech.name}
                width={600}
                height={400}
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div className="absolute bottom-0 left-0 p-8">
                <h3 className="text-primary-foreground font-bold text-xl mb-2">{tech.name}</h3>
                <div className="w-10 h-1 bg-accent" />
              </div>
            </motion.div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Technologies;