Entity preview

export const Default = () => (
  <div style={{ padding: 'var(--sp-6)' }}>
    <EntityPreview
      kind="person"
      name="Josef Novák"
      subtitle="Majitel firmy"
      rows={[
        { icon: 'phone', value: '+420 605 123 456' },
        { icon: 'mail', value: '[email protected]' },
        { icon: 'link', value: 'Brno Tech a.s.' },
      ]}
      openLabel="Otevřít detail"
      openHref="/person/1"
    >
      <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
    </EntityPreview>
  </div>
);

export const Variants = () => (
  <div style={{ ...wrap, padding: 'var(--sp-6)' }}>
    <Labeled text="person — avatar, role in the subtitle, contact rows">
      <EntityPreview
        kind="person"
        name="Josef Novák"
        subtitle="Majitel firmy"
        rows={[
          { icon: 'phone', value: '+420 605 123 456' },
          { icon: 'mail', value: '[email protected]' },
        ]}
        openLabel="Otevřít detail"
        openHref="/person/1"
      >
        <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="company — domain in the subtitle, owner as an avatar row">
      <EntityPreview
        kind="company"
        name="Brno Tech a.s."
        subtitle="brnotech.cz"
        rows={[{ avatarName: 'Eva Dvořáková', value: 'Eva Dvořáková' }]}
        openLabel="Otevřít detail"
        openHref="/firma/1"
      >
        <EntityRef type="company" name="Brno Tech a.s." onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="deal — facts strip (value, close date), stage as a row (K2: no pill)">
      <EntityPreview
        kind="deal"
        name="Dluhopisy 2026 — Brno Tech"
        facts={[{ text: '1 250 000 Kč' }, { text: 'do 30. 9.' }]}
        rows={[
          { icon: 'stage', value: 'Jednání' },
          { avatarName: 'Štěpán Svoboda', value: 'Štěpán Svoboda' },
        ]}
        openLabel="Otevřít obchod"
        openHref="/obchod/1"
      >
        <EntityRef type="deal" name="Dluhopisy 2026 — Brno Tech" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="with an excerpt — a note or e-mail clamps at three lines">
      <EntityPreview
        kind="note"
        name="Zápis z jednání"
        excerpt="Dohodli jsme se na objemu 1,25 mil. Kč, klient chce vidět modelaci výnosu do konce týdne a potřebuje ji schválit na správní radě, která zasedá 12. 9."
        openLabel="Otevřít poznámku"
        openHref="/poznamka/1"
      >
        <EntityRef type="note" name="Zápis z jednání" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ ...wrap, padding: 'var(--sp-6)' }}>
    <Labeled text="ready — the record answered">
      <EntityPreview
        kind="person"
        name="Josef Novák"
        subtitle="Majitel firmy"
        rows={[{ icon: 'phone', value: '+420 605 123 456' }]}
        openLabel="Otevřít detail"
        openHref="/person/1"
      >
        <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="loading — skeleton lines in place of the rows, the head is already there">
      <EntityPreview
        kind="person"
        name="Josef Novák"
        state="loading"
        openLabel="Otevřít detail"
        openHref="/person/1"
      >
        <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="unavailable — dimmed card and one sentence; the reference itself keeps working">
      <EntityPreview
        kind="person"
        name="Josef Novák"
        state="unavailable"
        unavailableLabel="Na tenhle záznam nemáš přístup."
        openLabel="Otevřít detail"
        openHref="/person/1"
      >
        <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
      </EntityPreview>
    </Labeled>

    <Labeled text="no subtitle (K4) and only one row (K3) — nothing is padded out to look fuller">
      <EntityPreview
        kind="company"
        name="Brno Tech a.s."
        rows={[{ icon: 'web', value: 'brnotech.cz' }]}
        openLabel="Otevřít detail"
        openHref="/firma/1"
      >
        <EntityRef type="company" name="Brno Tech a.s." onOpen={() => {}} />
      </EntityPreview>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{ padding: 'var(--sp-6)', maxWidth: 520, color: 'var(--fg-secondary)', lineHeight: 1.7 }}
  >
    Schůzku vede{' '}
    <EntityPreview
      kind="person"
      name="Josef Novák"
      subtitle="Majitel firmy"
      rows={[
        { icon: 'phone', value: '+420 605 123 456' },
        { icon: 'mail', value: '[email protected]' },
      ]}
      openLabel="Otevřít detail"
      openHref="/person/1"
    >
      <EntityRef type="person" name="Josef Novák" onOpen={() => {}} />
    </EntityPreview>{' '}
    za firmu{' '}
    <EntityPreview
      kind="company"
      name="Brno Tech a.s."
      subtitle="brnotech.cz"
      rows={[{ avatarName: 'Eva Dvořáková', value: 'Eva Dvořáková' }]}
      openLabel="Otevřít detail"
      openHref="/firma/1"
    >
      <EntityRef type="company" name="Brno Tech a.s." onOpen={() => {}} />
    </EntityPreview>{' '}
    a týká se obchodu{' '}
    <EntityPreview
      kind="deal"
      name="Dluhopisy 2026"
      facts={[{ text: '1 250 000 Kč' }]}
      rows={[{ icon: 'stage', value: 'Jednání' }]}
      openLabel="Otevřít obchod"
      openHref="/obchod/1"
    >
      <EntityRef type="deal" name="Dluhopisy 2026" onOpen={() => {}} />
    </EntityPreview>
    . A reference inside running text opens its card on hover as well as on Tab.
  </div>
);