import { ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";

export function SectionHeader({
  title,
  viewAllTo,
  viewAllLabel,
}: {
  title: string;
  viewAllTo?: string;
  viewAllLabel?: string;
}) {
  return (
    <div className="flex h-[49px] items-center justify-between gap-4 md:h-6">
      <div className="flex min-w-0 items-center gap-3 md:gap-4">
        <span
          className="h-5 w-[3px] shrink-0 bg-ark-gold md:h-6 md:w-1"
          aria-hidden
        />
        <h2 className="truncate text-lg font-semibold leading-[24.5px] tracking-tight text-white md:text-2xl md:font-bold md:leading-6">
          {title}
        </h2>
      </div>
      {viewAllTo && viewAllLabel ? (
        <Link
          to={viewAllTo}
          className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
        >
          {viewAllLabel}
          <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
        </Link>
      ) : null}
    </div>
  );
}