---
import DocLayout from "../../layouts/DocLayout.astro";
import Heading from "../../components/docs/Heading.astro";
import ComponentSection from "../../components/docs/ComponentSection.astro";
import ComponentExample from "../../components/docs/ComponentExample.astro";
import CodeBlock from "../../components/docs/CodeBlock.astro";
import PropsTable from "../../components/docs/PropsTable.astro";
import {
  BadgeVariantsDemo,
  BadgePrimaryDemo,
  BadgeSecondaryDemo,
  BadgeDestructiveDemo,
  BadgeOutlineDemo,
  BadgeBetaDemo,
  BadgeInSentenceDemo,
} from "../../components/demos/BadgeDemo";
---

<DocLayout
  title="Badge"
  description="Displays a small label for status, categorization, or metadata."
  sourceFile="components/badge"
>
  <!-- Demo -->
  <ComponentSection>
    <ComponentExample
      code={`<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="beta">Beta</Badge>`}
    >
      <BadgeVariantsDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <!-- Installation -->
  <ComponentSection>
    <Heading level={2}>Installation</Heading>
    <CodeBlock code={`npm install @cloudflare/kumo`} lang="bash" />
  </ComponentSection>

  <!-- Usage -->
  <ComponentSection>
    <Heading level={2}>Usage</Heading>
    <CodeBlock
      code={`import { Badge } from "@cloudflare/kumo";

export default function Example() {
  return <Badge variant="primary">Beta</Badge>;
}`}
      lang="tsx"
    />
  </ComponentSection>

  <!-- Examples -->
  <ComponentSection>
    <Heading level={2} class="mb-6">Examples</Heading>

    <!-- Variants -->
    <div class="mb-12">
      <Heading level={3}>Variants</Heading>
      <div class="space-y-8">
        <div>
          <h4 class="mb-3 text-base font-medium">Primary</h4>
          <ComponentExample code={`<Badge variant="primary">Primary</Badge>`}>
            <BadgePrimaryDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Secondary</h4>
          <ComponentExample code={`<Badge variant="secondary">Secondary</Badge>`}>
            <BadgeSecondaryDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Destructive</h4>
          <ComponentExample code={`<Badge variant="destructive">Destructive</Badge>`}>
            <BadgeDestructiveDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Outline</h4>
          <ComponentExample code={`<Badge variant="outline">Outline</Badge>`}>
            <BadgeOutlineDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Beta</h4>
          <ComponentExample code={`<Badge variant="beta">Beta</Badge>`}>
            <BadgeBetaDemo client:visible />
          </ComponentExample>
        </div>
      </div>
    </div>

    <!-- In a sentence -->
    <div class="mb-12">
      <Heading level={3}>In a sentence</Heading>
      <ComponentExample
        code={`<p className="flex items-center gap-2">
  Workers
  <Badge variant="beta">Beta</Badge>
</p>`}
      >
        <BadgeInSentenceDemo client:visible />
      </ComponentExample>
    </div>
  </ComponentSection>

  <!-- API Reference -->
  <ComponentSection>
    <Heading level={2}>API Reference</Heading>
    <PropsTable component="Badge" />
  </ComponentSection>
</DocLayout>
