"use client";

import { motion } from "framer-motion";
import { MapPin } from "lucide-react";
import SectionHeading from "./SectionHeading";
import Image from "next/image";
import Link from "next/link";
import type { HomeProject } from "@/services/pages/public/home";

interface ProjectsProps {
  heading?: string;
  subtitle?: string;
  projects?: HomeProject[];
}

const Projects = ({
  heading,
  subtitle,
  projects = [],
}: ProjectsProps) => {
  return (
    <section id="projects" className="petro-section">
      <div className="petro-container">
        <SectionHeading
          title={heading}
          subtitle={subtitle}
        />
        <div className="grid md:grid-cols-2 gap-8">
          {projects.map((project, i) => (
            <Link key={project.slug} href={`/projects#${project.slug}`}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.15, duration: 0.5 }}
              className="petro-card group cursor-pointer"
            >
              <div className="h-56 overflow-hidden">
                <Image
                  src={project.image_url ?? "/project-offshore.jpg"}
                  alt={project.title}
                  width={600}
                  height={400}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
              </div>
              <div className="p-8">
                {project.location && (
                  <div className="flex items-center gap-2 text-accent text-xs font-bold uppercase tracking-widest mb-3">
                    <MapPin size={14} />
                    {project.location}
                  </div>
                )}
                <h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
                  {project.title}
                </h3>
              </div>
            </motion.div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Projects;