import { Alert, AlertDescription, AlertTitle, Badge } from "@ai-ui/ui";
import type { Meta, StoryObj } from "@storybook/react";

function SparkIcon() {
  return (
    <svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
      <path
        d="M8 1.75L9.45 5.2L12.9 6.65L9.45 8.1L8 11.55L6.55 8.1L3.1 6.65L6.55 5.2L8 1.75Z"
        fill="currentColor"
      />
    </svg>
  );
}

const meta = {
  title: "Components/Alert",
  component: Alert,
  args: {
    variant: "default"
  },
  argTypes: {
    className: {
      control: false
    },
    icon: {
      control: false
    },
    variant: {
      control: "radio",
      options: ["default", "success", "warning", "destructive"]
    }
  },
  parameters: {
    layout: "centered"
  },
  tags: ["autodocs"]
} satisfies Meta<typeof Alert>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {
  render: (args) => (
    <Alert {...args} className="w-[460px]" icon={<SparkIcon />}>
      <AlertTitle>Release status updated</AlertTitle>
      <AlertDescription>
        The approval chain changed. Review the new ownership before publishing.
      </AlertDescription>
    </Alert>
  )
};

export const Variants: Story = {
  render: () => (
    <div className="grid w-[760px] gap-4">
      <Alert icon={<SparkIcon />}>
        <AlertTitle>Informational callout</AlertTitle>
        <AlertDescription>
          Pair with a <Badge className="ml-1">live</Badge> badge when status can change in real time.
        </AlertDescription>
      </Alert>
      <Alert icon={<SparkIcon />} variant="success">
        <AlertTitle>Release approved</AlertTitle>
        <AlertDescription>All reviewers signed off and rollout can begin.</AlertDescription>
      </Alert>
      <Alert icon={<SparkIcon />} variant="warning">
        <AlertTitle>Missing follow-up</AlertTitle>
        <AlertDescription>One checklist item is still unresolved for this launch.</AlertDescription>
      </Alert>
      <Alert icon={<SparkIcon />} variant="destructive">
        <AlertTitle>Publishing blocked</AlertTitle>
        <AlertDescription>Resolve validation issues before trying again.</AlertDescription>
      </Alert>
    </div>
  )
};