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-6 items-center justify-between gap-4">
      <div className="flex min-w-0 items-center gap-4">
        <span className="h-6 w-1 shrink-0 bg-ark-gold" aria-hidden />
        <h2 className="truncate text-2xl font-bold leading-6 tracking-tight text-white md:text-2xl">
          {title}
        </h2>
      </div>
      <Link
        to={viewAllTo}
        className="inline-flex shrink-0 items-center gap-1 text-[15px] font-medium leading-none text-ark-gold hover:text-ark-gold2"
      >
        {viewAllLabel}
        <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
      </Link>
    </div>
  );
}