---
import Icon from '@ui/Icon.astro'
import CardStamp from '@ui/CardStamp.astro'
import Prose from '@ui/Prose.astro'
import { site } from '@shared/lib/site'

interface Props {
  class?: string
}

const { class: className } = Astro.props
---

<div class:list={['card card-md', className]}>
  <CardStamp size="lg" icon="ghost" color="primary" />
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-10">
        <h3 class="h1">Tabler Icons</h3>
        <Prose>
          All icons come from the Tabler Icons set and are MIT-licensed. Visit
          <a href={site.icons.link} target="_blank" rel="noopener">Tabler Icons Website</a>, download any of the {site.iconsCount} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.
        </Prose>
        <div class="mt-3">
          <a href={site.icons.link} class="btn btn-primary" target="_blank" rel="noopener">
            <Icon name="download" />
            Download icons
          </a>
        </div>
      </div>
    </div>
  </div>
</div>