'use client';

import { motion } from 'framer-motion';
import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';

interface ServiceCardProps {
    title: string;
    description: string;
    bullets: string[];
    index: number;
    children?: ReactNode;
}

export const ServiceCard = ({ title, description, bullets, index, children }: ServiceCardProps) => {
    return (
        <motion.div
            className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: index * 0.1 }}
            whileHover={{
                scale: 1.03,
                boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
            }}
        >
            <div>
                <h3 className="text-xl font-semibold mb-2">{title}</h3>
                <p className="text-muted-foreground mb-4">{description}</p>
                <ul className="space-y-3">
                    {bullets.map((point, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <ChevronRight className="w-4 h-4 text-primary mt-1" />
                            <span className="text-sm text-foreground">{point}</span>
                        </li>
                    ))}
                </ul>
                {children && <div className="mt-4">{children}</div>}
            </div>
        </motion.div>
    );
};