import type { Meta, StoryObj } from '@storybook/react-vite';
import { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from './alert';

const meta = {
  title: 'Components/Alert',
  component: Alert,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Inline message about the state of the page. It carries `role="alert"`, so screen readers announce it the moment it appears — do not use it for static explanatory copy.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['default', 'destructive', 'success', 'warning'] },
  },
  decorators: [(Story) => <div className="w-96"><Story /></div>],
} satisfies Meta<typeof Alert>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: () => (
    <Alert>
      <InfoIcon />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>The API will be read-only on Sunday from 02:00 UTC.</AlertDescription>
    </Alert>
  ),
};

export const Variants: Story = {
  render: () => (
    <div className="grid gap-3">
      <Alert>
        <InfoIcon />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>You can revert this change for 30 days.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Deployment finished</AlertTitle>
        <AlertDescription>Version 2.4.0 is live in production.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Approaching your quota</AlertTitle>
        <AlertDescription>You have used 92% of this month&apos;s credits.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>Update your card to avoid losing access.</AlertDescription>
      </Alert>
    </div>
  ),
};

export const TitleOnly: Story = {
  render: () => (
    <Alert>
      <CircleCheckIcon />
      <AlertTitle>Your changes have been saved.</AlertTitle>
    </Alert>
  ),
};