'use client'

import * as motion from 'framer-motion/m'

interface SectionTitleProps {
  children: React.ReactNode
}

export default function SectionTitle({ children }: SectionTitleProps) {
  return (
    <motion.h2
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className="text-3xl md:text-4xl font-bold mb-8 relative inline-block"
    >
      {children}
      <span className="absolute -bottom-3 left-0 w-16 h-1 bg-linear-to-r from-primary to-secondary rounded-full" />
    </motion.h2>
  )
}