import { Banner } from "@cloudflare/kumo";
import { Info, WarningCircle, Warning } from "@phosphor-icons/react";

/** Shows all banner variants with structured title and description. */
export function BannerVariantsDemo() {
  return (
    <div className="w-full space-y-3">
      <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."
      />
    </div>
  );
}

import { Banner } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";

/** Default informational banner with title and description. */
export function BannerDefaultDemo() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      title="Update available"
      description="A new version is ready to install."
    />
  );
}

import { Banner } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Alert banner for warnings that need attention. */
export function BannerAlertDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
    />
  );
}

import { Banner } from "@cloudflare/kumo";
import { WarningCircle } from "@phosphor-icons/react";

/** Error banner for critical issues. */
export function BannerErrorDemo() {
  return (
    <Banner
      icon={<WarningCircle weight="fill" />}
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    />
  );
}

import { Banner } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Banner with custom icon and structured content. */
export function BannerWithIconDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Review required"
      description="Please review your billing information before proceeding."
    />
  );
}

import { Banner, Button } from "@cloudflare/kumo";
import { Info, X } from "@phosphor-icons/react";

/** Banner with action buttons: CTA and dismissable. */
export function BannerWithActionDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Info weight="fill" />}
        title="Update available"
        description="A new version is ready to install."
        action={<Button size="sm">Update now</Button>}
      />
      <Banner
        icon={<Info weight="fill" />}
        title="Update available"
        description="A new version is ready to install."
        action={
          <Button
            size="sm"
            variant="ghost"
            shape="square"
            icon={X}
            aria-label="Dismiss"
          />
        }
      />
    </div>
  );
}

import { Banner, Button } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Banner with multiple action buttons. */
export function BannerWithActionsDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      action={
        <>
          <Button size="sm" variant="secondary">
            Dismiss
          </Button>
          <Button size="sm">Extend session</Button>
        </>
      }
    />
  );
}

import { Banner, Text } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";

/** Banner with custom React content in description. */
export function BannerCustomContentDemo() {
  return (
    <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>
      }
    />
  );
}