import { Meta, StoryObj } from '@storybook/react-vite'

import { Alert, AlertDescription, AlertTitle } from './alert'
import { RocketIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'

const meta = {
  title: 'Alert',
  component: Alert,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      options: ['default', 'destructive'],
    },
  },
} satisfies Meta<typeof Alert>

export default meta

export const Default: StoryObj<typeof meta> = {
  parameters: {
    docs: {
      description: {
        story: 'The Alert component is used to display a message to the user.',
      },
    },
  },
  args: {
    variant: 'default',
  },
  render: (args) => (
    <div className="flex items-center justify-center border rounded p-4">
      <Alert {...args}>
        <RocketIcon className="h-4 w-4" />
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
      </Alert>
    </div>
  ),
}

export const Destructive: StoryObj<typeof meta> = {
  parameters: {
    docs: {
      description: {
        story: 'The destructive variant is used for critical alerts that require immediate attention.',
      },
    },
  },
  args: {
    variant: 'destructive',
  },
  render: (args) => (
    <div className="flex items-center justify-center border rounded p-4">
      <Alert {...args}>
        <ExclamationTriangleIcon className="h-4 w-4" />
        <AlertTitle>Error!</AlertTitle>
        <AlertDescription>Something went wrong. Please try again.</AlertDescription>
      </Alert>
    </div>
  ),
}
