/**
 * تب دکترها با نشانگر underline — بازسازی تب‌های بالای صفحهٔ نوبت‌های طرح tauri
 * (`index.jsx`): فعال #5559ce با خط زیرین، بقیه خاکستری.
 */
export interface DoctorTab {
  uuid: string;
  name: string;
}

export default function DoctorTabs({
  doctors, selected, onSelect, showAll = true,
}: {
  doctors: DoctorTab[];
  /** '' یعنی «همه». */
  selected: string;
  onSelect: (uuid: string) => void;
  showAll?: boolean;
}) {
  const tabs: DoctorTab[] = showAll ? [{ uuid: '', name: 'همه' }, ...doctors] : doctors;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 24, padding: '8px 16px 0',
      borderBottom: '1px solid var(--border)', overflowX: 'auto',
    }}>
      {tabs.map((d) => {
        const active = selected === d.uuid;
        return (
          <button
            key={d.uuid || 'all'}
            type="button"
            onClick={() => onSelect(d.uuid)}
            style={{
              position: 'relative', background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 15, fontWeight: 500, padding: '8px 2px 12px',
              color: active ? 'var(--primary)' : 'var(--text-2)', whiteSpace: 'nowrap',
              // برچسب‌های کوتاه («همه») بدون این، عرضشان زیر ۴۴px می‌ماند (WCAG 2.5.5)
              minWidth: 44,
            }}
          >
            {d.name}
            {active && (
              <span style={{
                position: 'absolute', bottom: -1, left: 0, right: 0, height: 3,
                background: 'var(--primary)', borderRadius: '3px 3px 0 0',
              }} />
            )}
          </button>
        );
      })}
    </div>
  );
}