---
import Layout from '../layouts/Layout.astro';
import {
  Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
  CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
  LinkIcon, MinusIcon, MoreIcon, OverviewIcon, PlusIcon, ProfileIcon,
  SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
  UploadIcon,
} from '../components/Icons/index.ts';
---

<Layout>
  <main>
    <h1>Nova Design System</h1>
    <section>
      <h2>Icon — 16 / 24 / 32</h2>
      <div class="icon-grid">
        <div class="icon-row">
          <Arrow2Icon size={16} orientation="up" />
          <Arrow2Icon size={16} orientation="right" />
          <Arrow2Icon size={16} orientation="down" />
          <Arrow2Icon size={16} orientation="left" />
        </div>
        <div class="icon-row">
          <Arrow2Icon size={24} orientation="up" />
          <Arrow2Icon size={24} orientation="right" />
          <Arrow2Icon size={24} orientation="down" />
          <Arrow2Icon size={24} orientation="left" />
        </div>
        <div class="icon-row">
          <Arrow2Icon size={32} orientation="up" />
          <Arrow2Icon size={32} orientation="right" />
          <Arrow2Icon size={32} orientation="down" />
          <Arrow2Icon size={32} orientation="left" />
        </div>
        <div class="icon-row">
          <ProfileIcon size={16} />
          <ProfileIcon size={24} />
          <ProfileIcon size={32} />
        </div>
        <div class="icon-row">
          <ShareIcon size={16} />
          <ShareIcon size={24} />
          <ShareIcon size={32} />
        </div>
        <div class="icon-row">
          <SearchIcon size={16} />
          <SearchIcon size={24} />
          <SearchIcon size={32} />
        </div>
        <div class="icon-row">
          <CloseIcon size={16} />
          <CloseIcon size={24} />
          <CloseIcon size={32} />
        </div>
        <div class="icon-row">
          <UploadIcon size={16} />
          <UploadIcon size={24} />
          <UploadIcon size={32} />
        </div>
        <div class="icon-row">
          <BinIcon size={16} />
          <BinIcon size={24} />
          <BinIcon size={32} />
        </div>
        <div class="icon-row">
          <BurgerIcon size={16} />
          <BurgerIcon size={24} />
          <BurgerIcon size={32} />
        </div>
        <div class="icon-row">
          <CalendarIcon size={16} />
          <CalendarIcon size={24} />
          <CalendarIcon size={32} />
        </div>
        <div class="icon-row">
          <CheckIcon size={16} />
          <CheckIcon size={24} />
          <CheckIcon size={32} />
        </div>
        <div class="icon-row">
          <CodeIcon size={16} />
          <CodeIcon size={24} />
          <CodeIcon size={32} />
        </div>
        <div class="icon-row">
          <CubeIcon size={16} />
          <CubeIcon size={24} />
          <CubeIcon size={32} />
        </div>
        <div class="icon-row">
          <DownloadIcon size={16} />
          <DownloadIcon size={24} />
          <DownloadIcon size={32} />
        </div>
        <div class="icon-row">
          <FilterIcon size={16} />
          <FilterIcon size={24} />
          <FilterIcon size={32} />
        </div>
        <div class="icon-row">
          <HelpIcon size={16} />
          <HelpIcon size={24} />
          <HelpIcon size={32} />
        </div>
        <div class="icon-row">
          <HomeIcon size={16} />
          <HomeIcon size={24} />
          <HomeIcon size={32} />
        </div>
        <div class="icon-row">
          <LinkIcon size={16} />
          <LinkIcon size={24} />
          <LinkIcon size={32} />
        </div>
        <div class="icon-row">
          <MinusIcon size={16} />
          <MinusIcon size={24} />
          <MinusIcon size={32} />
        </div>
        <div class="icon-row">
          <MoreIcon size={16} />
          <MoreIcon size={24} />
          <MoreIcon size={32} />
        </div>
        <div class="icon-row">
          <OverviewIcon size={16} />
          <OverviewIcon size={24} />
          <OverviewIcon size={32} />
        </div>
        <div class="icon-row">
          <PlusIcon size={16} />
          <PlusIcon size={24} />
          <PlusIcon size={32} />
        </div>
        <div class="icon-row">
          <SettingsIcon size={16} />
          <SettingsIcon size={24} />
          <SettingsIcon size={32} />
        </div>
        <div class="icon-row">
          <ShieldIcon size={16} />
          <ShieldIcon size={24} />
          <ShieldIcon size={32} />
        </div>
        <div class="icon-row">
          <SortIcon size={16} variant="default" />
          <SortIcon size={16} variant="ascend" />
          <SortIcon size={16} variant="descend" />
          <SortIcon size={24} variant="default" />
          <SortIcon size={24} variant="ascend" />
          <SortIcon size={24} variant="descend" />
          <SortIcon size={32} variant="default" />
          <SortIcon size={32} variant="ascend" />
          <SortIcon size={32} variant="descend" />
        </div>
        <div class="icon-row">
          <StatsIcon size={16} />
          <StatsIcon size={24} />
          <StatsIcon size={32} />
        </div>
      </div>
    </section>
  </main>
</Layout>

<style>
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
  }

  h1 {
    font-size: var(--nds-type-display-small-size);
    font-weight: var(--nds-type-display-small-weight);
    line-height: var(--nds-type-display-small-line-height);
    letter-spacing: var(--nds-type-display-small-letter-spacing);
    margin-bottom: var(--nds-spacing-xl);
  }

  h2 {
    font-size: var(--nds-type-heading-small-size);
    font-weight: var(--nds-type-heading-small-weight);
    line-height: var(--nds-type-heading-small-line-height);
    letter-spacing: var(--nds-type-heading-small-letter-spacing);
    color: var(--nds-text-muted);
    margin-bottom: var(--nds-spacing-md);
  }

  section {
    margin-bottom: var(--nds-spacing-2xl);
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nds-spacing-sm);
  }

  .icon-grid {
    display: flex;
    flex-direction: column;
    gap: var(--nds-spacing-xs);
  }

  .icon-row {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-lg);
  }

  .icon-name {
    font-size: var(--nds-type-body-small-size);
    color: var(--nds-text-muted);
    width: 100px;
    flex-shrink: 0;
  }

  .icon-sizes {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-md);
    color: var(--nds-default);
  }
</style>