import * as React from 'react';
import { ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * SectionHeader — the label row above a section or inside a card. Three levels
 * so the hierarchy below a PageHeader stays predictable:
 *
 * - `overline` — a small all-caps group label ("INTERVIEW COMPLETION")
 * - `card`     — a card's own title row
 * - `section`  — a page-level section title
 */
/** @param {any} props */
export function SectionHeader({
  title,
  subtitle,
  icon: Icon,
  level = 'card',
  actions,
  /** Renders a "View all ›" affordance on the right. */
  onViewAll,
  viewAllLabel = 'View all',
  className,
}) {
  if (level === 'overline') {
    return (
      <div className={cn('flex items-center justify-between gap-3 mb-3', className)}>
        <h2 className="text-overline uppercase text-ink-4 font-heading">{title}</h2>
        {actions}
      </div>
    );
  }

  return (
    <div
      className={cn(
        'flex items-start justify-between gap-3',
        level === 'section' ? 'mb-4' : 'mb-5',
        className
      )}
    >
      <div className="flex items-start gap-2.5 min-w-0">
        {Icon && (
          <span className="grid place-items-center w-8 h-8 rounded-lg bg-krow-blue-tint text-krow-blue shrink-0">
            <Icon className="w-4 h-4" aria-hidden="true" />
          </span>
        )}
        <div className="min-w-0">
          <h3
            className={cn(
              'font-heading text-ink-1 truncate',
              level === 'section' ? 'text-title-lg' : 'text-title'
            )}
          >
            {title}
          </h3>
          {subtitle && <p className="text-caption text-ink-3 mt-0.5">{subtitle}</p>}
        </div>
      </div>

      <div className="flex items-center gap-2 shrink-0">
        {actions}
        {onViewAll && (
          <button
            type="button"
            onClick={onViewAll}
            className="inline-flex items-center gap-1 text-caption font-medium text-krow-blue hover:underline focus-ring rounded-sm"
          >
            {viewAllLabel}
            <ChevronRight className="w-3 h-3" aria-hidden="true" />
          </button>
        )}
      </div>
    </div>
  );
}