import Link from "next/link";

interface SectionHeaderProps {
  title?: string;
  details?: string;
  viewAllHref?: string;
  viewAllLabel?: string;
}

export default function SectionHeader({
  title,
  details,
  viewAllHref,
  viewAllLabel = "View all",
}: SectionHeaderProps) {
  const showAction = Boolean(viewAllHref);

  return (
    <div className="flex w-full items-center justify-between gap-4">
      {(title || details) && (
        <div className="min-w-0">
          <h2 className="text-lg font-medium leading-snug text-[#1f2440] sm:text-2xl">
            {title && <span>{title}</span>}
            {title && details && <span className="text-gray-500">. </span>}
            {details && <span className="font-normal text-gray-500">{details}</span>}
          </h2>
        </div>
      )}

      {showAction && (
        <Link
          href={viewAllHref!}
          className="ml-auto inline-flex shrink-0 items-center gap-3 text-xs font-medium text-[#00AFC1] transition-colors hover:text-[#008fa0] sm:text-sm"
        >
          {viewAllLabel}
          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
          </svg>
        </Link>
      )}
    </div>
  );
}
