/* Recare — Doctors row (bilingual) */
function DoctorsRow({ lang = "EN", specialty = 0, onBook = () => {} }) {
  const t = T(lang).doctors;
  const list = specialty === 0 ? t.items : t.items.filter(d => d.specIdx === specialty);

  if (list.length === 0) {
    return (
      <div className="doc-empty" style={{ textAlign: 'center', padding: '32px 16px', color: 'var(--fg-muted)' }}>
        {t.empty}
      </div>
    );
  }

  return (
    <div className="doc-grid">
      {list.map((d, i) => (
        <div key={i} className="doc">
          <div className="doc__avatar">
            <span className="doc__avatar-fallback">{d.initials}</span>
          </div>
          <div>
            <div className="doc__name">{d.name}</div>
            <div className="doc__role">{d.role}</div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Chip tone="default" icon="globe">{d.lang}</Chip>
          </div>
          <div className="doc__meta">
            <span className="doc__rating">
              <Icon name="star" size={14} style={{ color: 'var(--rc-warning)', fill: 'currentColor' }}/>
              {d.rating} <span style={{ color: 'var(--fg-muted)', fontWeight: 400 }}>({d.reviews})</span>
            </span>
            <Button variant="ghost" size="sm" onClick={() => onBook(d)}>{t.book}</Button>
          </div>
        </div>
      ))}
    </div>
  );
}
Object.assign(window, { DoctorsRow });