// @design-system: layout/SectionHeader
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

export interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  actionHref?: string;
  actionLabel?: string;
  /**
   * Optional node rendered on the start side, adjacent to the title.
   * Use for compact inline controls (e.g. CitySelector + UseMyLocationButton
   * in the Near You home row). actionHref/actionLabel remain on the end side.
   */
  extraStart?: ReactNode;
  className?: string;
}

export function SectionHeader({
  title,
  subtitle,
  actionHref,
  actionLabel,
  extraStart,
  className,
}: SectionHeaderProps) {
  return (
    <div className={cn('mb-3 flex items-center justify-between px-6 pt-4', className)}>
      {/* Start side: title stack + optional extraStart controls */}
      <div className="flex min-w-0 items-center gap-3">
        <div className="flex min-w-0 flex-col">
          <h2 className="text-text-primary text-[length:var(--font-size-xl)] leading-[var(--line-height-tight)] font-[var(--font-weight-extrabold)]">
            {title}
          </h2>
          {subtitle && <p className="text-text-muted text-sm">{subtitle}</p>}
        </div>
        {extraStart && <div className="flex shrink-0 items-center gap-2">{extraStart}</div>}
      </div>
      {/* End side: see-all link */}
      {actionHref && actionLabel && (
        <a
          href={actionHref}
          className="text-mode-customer-700 hover:text-mode-customer-800 shrink-0 text-sm font-semibold hover:underline"
        >
          {actionLabel}
        </a>
      )}
    </div>
  );
}