'use client';

import { motion } from 'framer-motion';

interface SectionTitleProps {
    title: string;
    subtitle?: string;
    className?: string;
    showUnderline?: boolean;
    underlineColor?: string;
}

export const SectionTitle = ({ 
    title, 
    subtitle, 
    className = "", 
    showUnderline = true,
    underlineColor = "bg-amber-500"
}: SectionTitleProps) => {
    return (
        <div className={className}>
            <motion.h2
                className="text-3xl md:text-4xl font-bold mb-1 text-left"
                initial={{ opacity: 0, y: 10 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4 }}
            >
                {title}
            </motion.h2>

            {showUnderline && (
                <motion.div
                    className={`w-12 h-[2px] mt-2 mb-10 ${underlineColor}`}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.4, delay: 0.1 }}
                />
            )}

            {subtitle && (
                <motion.p
                    className="text-lg text-muted-foreground mt-4"
                    initial={{ opacity: 0, y: 10 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.4, delay: 0.2 }}
                >
                    {subtitle}
                </motion.p>
            )}
        </div>
    );
};