---
interface Props {
    kind: 'event' | 'document';
}
---
<span class:list={['share-row__mark', `share-row__mark--${Astro.props.kind}`]}>
  {Astro.props.kind === 'event' ? (
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <g fill="currentColor">
        <path d="M16 2a1 1 0 0 1 .993.883L17 3v1h1a3 3 0 0 1 2.995 2.824L21 7v12a3 3 0 0 1-2.824 2.995L18 22H6a3 3 0 0 1-2.995-2.824L3 19V7a3 3 0 0 1 2.824-2.995L6 4h1V3a1 1 0 0 1 1.993-.117L9 3v1h6V3a1 1 0 0 1 1-1m3 7H5v9.625c0 .705.386 1.286.883 1.366L6 20h12c.513 0 .936-.53.993-1.215l.007-.16z"/>
        <path d="M12 12a1 1 0 0 1 .993.883L13 13v3a1 1 0 0 1-1.993.117L11 16v-2a1 1 0 0 1-.117-1.993L11 12z"/>
      </g>
    </svg>
  ) : (
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <g class="document-outline">
        <g fill="currentColor" fill-rule="evenodd" class="Vector" clip-rule="evenodd">
          <path d="M15.143 22H8.286A4.286 4.286 0 0 1 4 17.714V6.286A4.286 4.286 0 0 1 8.286 2h4.008a3.5 3.5 0 0 1 2.304.866l3.635 3.18a3.5 3.5 0 0 1 1.196 2.635v9.033A4.286 4.286 0 0 1 15.143 22m0-2H8.286A2.286 2.286 0 0 1 6 17.714V6.286A2.286 2.286 0 0 1 8.286 4h4.008a1.5 1.5 0 0 1 .987.371l3.635 3.18a1.5 1.5 0 0 1 .513 1.13v9.033A2.286 2.286 0 0 1 15.143 20"/>
          <path d="M13 3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h2.5a1 1 0 1 1 0 2H15a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1"/>
        </g>
      </g>
    </svg>
  )}
  <span class="visually-hidden">
    {Astro.props.kind === 'event' ? 'Event' : 'Content'}
  </span>
</span>

<style>
  .share-row__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--foreground-secondary);
    line-height: 1;
  }

  .share-row__mark svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .share-row__mark--event {
    background: var(--warning-muted);
    color: var(--warning-muted-foreground);
  }

  .share-row__mark--document {
    background: var(--info-muted);
    color: var(--info-muted-foreground);
  }
</style>