1  import { cn } from '@/lib/utils'
 2  
 3  interface SectionHeaderProps {
 4    label: string
 5    count?: number
 6    action?: { label: string; onClick: () => void }
 7    className?: string
 8  }
 9  
10  export function SectionHeader({ label, count, action, className }: SectionHeaderProps) {
11    return (
12      <div className={cn('flex items-center justify-between mb-3', className)}>
13        <h2 className="font-display text-[13px] font-600 text-text-2 uppercase tracking-[0.08em] flex items-center gap-2">
14          {label}
15          {count != null && (
16            <span className="text-[11px] font-500 text-text-3/50 normal-case tracking-normal">
17              {count}
18            </span>
19          )}
20        </h2>
21        {action && (
22          <button
23            onClick={action.onClick}
24            className="text-[11px] text-text-3/50 hover:text-text-3 transition-colors bg-transparent border-none cursor-pointer"
25            style={{ fontFamily: 'inherit' }}
26          >
27            {action.label}
28          </button>
29        )}
30      </div>
31    )
32  }