---
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 {
  BannerVariantsDemo,
  BannerDefaultDemo,
  BannerAlertDemo,
  BannerErrorDemo,
  BannerWithIconDemo,
  BannerCustomContentDemo,
} from "../../components/demos/BannerDemo";
---

<DocLayout
  title="Banner"
  description="Displays contextual inline messages for informational, alert, or error states."
  sourceFile="components/banner"
>
  <!-- Demo -->
  <ComponentSection>
    <ComponentExample
      code={`<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
/>
<Banner
  icon={<Warning weight="fill" />}
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
/>
<Banner
  icon={<WarningCircle weight="fill" />}
  variant="error"
  title="Save failed"
  description="We couldn't save your changes. Please try again."
/>`}
    >
      <BannerVariantsDemo 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 { Banner } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      title="Update available"
      description="A new version is ready to install."
    />
  );
}`}
      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">Default</h4>
          <ComponentExample
            code={`<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
/>`}
          >
            <BannerDefaultDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Alert</h4>
          <ComponentExample
            code={`<Banner
  icon={<Warning weight="fill" />}
  variant="alert"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
/>`}
          >
            <BannerAlertDemo client:visible />
          </ComponentExample>
        </div>

        <div>
          <h4 class="mb-3 text-base font-medium">Error</h4>
          <ComponentExample
            code={`<Banner
  icon={<WarningCircle weight="fill" />}
  variant="error"
  title="Save failed"
  description="We couldn't save your changes. Please try again."
/>`}
          >
            <BannerErrorDemo client:visible />
          </ComponentExample>
        </div>
      </div>
    </div>

    <!-- With icon -->
    <div class="mb-12">
      <Heading level={3}>With icon</Heading>
      <ComponentExample
        code={`<Banner
  icon={<Warning weight="fill" />}
  variant="alert"
  title="Review required"
  description="Please review your billing information before proceeding."
/>`}
      >
        <BannerWithIconDemo client:visible />
      </ComponentExample>
    </div>

    <!-- Custom content -->
    <div class="mb-12">
      <Heading level={3}>Custom content</Heading>
      <ComponentExample
        code={`<Banner
  icon={<Info weight="fill" />}
  title="Custom content supported"
  description={
    <Text DANGEROUS_className="text-inherit">
      This banner supports <strong>custom content</strong> with Text.
    </Text>
  }
/>`}
      >
        <BannerCustomContentDemo client:visible />
      </ComponentExample>
    </div>
  </ComponentSection>

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