"use client"

import { motion } from "framer-motion";

export function SectionHeader({ title, subtitle, className = "" }) {
  return (
    <div className={`text-center mb-12 space-y-4 ${className}`}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        viewport={{ once: true }}
      >
        <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
        {subtitle && (
          <p className="text-muted-foreground mt-2">{subtitle}</p>
        )}
        
        {/* Stylish bottom bar */}
        <div className="flex items-center justify-center gap-2 mt-4">
          <motion.div
            initial={{ width: 0 }}
            whileInView={{ width: "40px" }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
            className="h-1 bg-gradient-to-r from-transparent to-primary rounded-full"
          />
          <motion.div
            initial={{ scale: 0 }}
            whileInView={{ scale: 1 }}
            transition={{ duration: 0.3, delay: 0.4 }}
            viewport={{ once: true }}
            className="h-2 w-2 rounded-full bg-primary"
          />
          <motion.div
            initial={{ width: 0 }}
            whileInView={{ width: "60px" }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
            className="h-1.5 bg-primary rounded-full"
          />
          <motion.div
            initial={{ scale: 0 }}
            whileInView={{ scale: 1 }}
            transition={{ duration: 0.3, delay: 0.4 }}
            viewport={{ once: true }}
            className="h-2 w-2 rounded-full bg-primary"
          />
          <motion.div
            initial={{ width: 0 }}
            whileInView={{ width: "40px" }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
            className="h-1 bg-gradient-to-l from-transparent to-primary rounded-full"
          />
        </div>
      </motion.div>
    </div>
  );
}
