"use client"
import { motion } from "framer-motion";
import { ChevronRight, Wrench } from "lucide-react";
import Link from "next/link";
import SectionHeading from "./SectionHeading";
import type { LucideIcon } from "lucide-react";
import { SECTOR_ICONS } from "@/lib/sectorIconMap";
import type { HomeService } from "@/services/pages/public/home";

interface ServiceCardProps {
  icon: LucideIcon;
  title: string;
  desc: string;
  index: number;
  serviceId: string;
}

const ServiceCard = ({ icon: Icon, title, desc, index, serviceId }: ServiceCardProps) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ delay: index * 0.1, duration: 0.5 }}
    whileHover={{ y: -5 }}
    className="petro-card p-8 group"
  >
    <Link href={`/services/${serviceId}`} className="block">
      <div className="absolute top-0 left-0 w-1 h-0 bg-accent transition-all duration-300 group-hover:h-full" />
      <div className="mb-6 inline-block p-4 bg-secondary rounded-sm text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300">
        <Icon size={28} />
      </div>
      <h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors">{title}</h3>
      <p className="text-muted-foreground text-sm leading-relaxed mb-6">{desc}</p>
      <div className="flex items-center text-xs font-bold uppercase tracking-widest text-accent opacity-0 group-hover:opacity-100 transition-all translate-y-2 group-hover:translate-y-0">
        Learn More <ChevronRight size={14} />
      </div>
    </Link>
  </motion.div>
);

interface ServicesProps {
  heading?: string;
  subtitle?: string;
  services?: HomeService[];
}

const Services = ({
  heading,
  subtitle,
  services = [],
}: ServicesProps) => {
  const displayItems = services.slice(0, 7).map((s) => ({
    key: s.slug,
    icon: (s.icon ? SECTOR_ICONS[s.icon]?.component : null) ?? Wrench,
    title: s.title,
    desc: s.short_desc,
    serviceId: s.slug,
  }));

  return (
    <section id="services" className="petro-section bg-secondary">
      <div className="petro-container">
        <SectionHeading
          title={heading}
          subtitle={subtitle}
        />
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {displayItems.map((item, i) => (
            <ServiceCard key={item.key} icon={item.icon} title={item.title} desc={item.desc} index={i} serviceId={item.serviceId} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;