import { ChevronLeftIcon } from "@/components/ui/icons";

type SectionTitleProps = {
  title: string;
  enTitle?: string;
  subtitle?: string;
  action?: string;
  actionHref?: string;
};

export function SectionTitle({ title, enTitle, subtitle, action, actionHref }: SectionTitleProps) {
  return (
    <div className="mb-6 flex items-center justify-between gap-4">
      <div>
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <h2 className="text-xl font-bold text-red-dark md:text-2xl">{title}</h2>
          {enTitle && (
            <span
              className="font-display text-sm font-semibold tracking-wide text-red-dark/30 uppercase md:text-base"
              lang="en"
              dir="ltr"
            >
              {enTitle}
            </span>
          )}
        </div>
        {subtitle && (
          <p className="mt-1 text-sm text-muted">{subtitle}</p>
        )}
      </div>
      {action && actionHref && (
        <a
          href={actionHref}
          className="flex shrink-0 items-center gap-1.5 rounded-lg bg-red px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
        >
          {action}
          <ChevronLeftIcon className="h-4 w-4" />
        </a>
      )}
    </div>
  );
}