"use client";

import { motion } from "framer-motion";
import { useTranslation } from "@/lib/i18n/context";

interface SectionHeadingProps {
  tag: string;
  title: string;
  subtitle?: string;
  center?: boolean;
  light?: boolean;
}

export function SectionHeading({
  tag,
  title,
  subtitle,
  center = true,
  light = false,
}: SectionHeadingProps) {
  const { dir } = useTranslation();

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      className={`mb-12 md:mb-16 ${center ? "text-center" : ""}`}
      dir={dir}
    >
      <span
        className={`inline-block px-4 py-1.5 rounded-full text-sm font-semibold mb-4 ${
          light
            ? "bg-white/10 text-white/90"
            : "bg-baby-blue/50 text-primary"
        }`}
      >
        {tag}
      </span>
      <h2
        className={`text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4 ${
          light ? "text-white" : "text-dark-text"
        }`}
      >
        {title}
      </h2>
      {subtitle && (
        <p
          className={`text-base md:text-lg max-w-2xl ${
            center ? "mx-auto" : ""
          } ${light ? "text-white/70" : "text-dark-text/60"}`}
        >
          {subtitle}
        </p>
      )}
    </motion.div>
  );
}