"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
// import { Shield, Clock, Users, Wrench } from "lucide-react";
import { getServices } from "@/lib/api";
import Image from "next/image";

interface Service {
  name: string;
  description: string;
  banner: string;
}
const Services = () => {
  const [services, setServices] = useState<Service[] | undefined>(undefined);
  useEffect(() => {
    async function fetchServices() {
      const resp = await getServices();
      setServices(resp[0].services);
    }
    fetchServices();
  }, []);
  console.log(services);
  return (
    <section
      id="services"
      className="py-20 my-16 bg-gradient-to-br rounded-xl from-gray-900 via-red-600 to-gray-900 text-white max-w-7xl mx-auto"
    >
      <div className="container mx-auto px-4">
        <motion.h2
          initial={{ y: 20, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          viewport={{ once: true }}
          className="text-4xl font-bold text-center mb-16"
        >
          Our Services
        </motion.h2>
        {services ? (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <motion.div
                key={index}
                initial={{ x: index % 2 === 0 ? -50 : 50, opacity: 0 }}
                whileInView={{ x: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="flex items-start space-x-4 p-6 rounded-lg bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors duration-300"
              >
                {/* <service.icon className="w-8 h-8 text-blue-400 flex-shrink-0" /> */}
                <div>
                  <Image
                    src={`${process.env.NEXT_PUBLIC_API_URL}/storage/${service.banner}`}
                    alt={service.name}
                    width={100}
                    height={100}
                  />
                </div>
                <div>
                  <h3 className="text-xl font-bold mb-2">{service.name}</h3>
                  <p className="text-blue-100">{service.description}</p>
                </div>
              </motion.div>
            ))}
          </div>
        ) : (
          <div>Loading...</div>
        )}
      </div>
    </section>
  );
};

export default Services;