"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Reveal } from "@/components/motion/Reveal";

/** Shared section title row. */
export function SectionHeader({
  eyebrow,
  title,
  description,
  href,
  actionLabel = "View all",
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  href?: string;
  actionLabel?: string;
}) {
  return (
    <Reveal className="mb-6 flex items-end justify-between gap-4 sm:mb-7">
      <div className="max-w-2xl">
        {eyebrow ? (
          <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-muted">
            {eyebrow}
          </p>
        ) : null}
        <h2 className="mt-1.5 text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
          {title}
        </h2>
        {description ? (
          <p className="mt-1.5 max-w-xl text-xs leading-relaxed text-muted sm:text-sm">
            {description}
          </p>
        ) : null}
      </div>
      {href ? (
        <Link
          href={href}
          className="group inline-flex shrink-0 items-center gap-1 text-xs font-semibold text-foreground underline-offset-4 transition-transform hover:underline sm:text-sm"
        >
          {actionLabel}
          <ArrowRight className="h-3.5 w-3.5 transition-transform duration-300 ease-out group-hover:translate-x-1" />
        </Link>
      ) : null}
    </Reveal>
  );
}