"use client";

import { motion } from "framer-motion";

export function SectionDivider({
  title,
  subtitle,
}: {
  title: string;
  subtitle?: string;
}) {
  return (
    <div className="w-full mb-4">
      {/* Title */}
      <div className="flex flex-col">
        <h2 className="text-xl font-semibold text-brandblue tracking-tight">
          {title}
        </h2>

        {subtitle && <p className="text-sm text-gray-500 mt-0.5">{subtitle}</p>}
      </div>

      {/* Animated gradient line */}
      <motion.div
        initial={{ width: 0 }}
        whileInView={{ width: "100%" }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="h-1 mt-2 rounded-full bg-gradient-to-r from-brandblue via-midblue to-brandlightblue"
      />
    </div>
  );
}
