import type { Meta, StoryObj } from '@storybook/react';
import { Alert, AlertTitle, AlertDescription } from './alert';
import { Terminal, AlertCircle, Info, CheckCircle2, AlertTriangle } from 'lucide-react';
import React from 'react';

const meta: Meta<typeof Alert> = {
  title: 'UI/Alert',
  component: Alert,
  render: args => <Alert {...args} />,
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'info', 'success', 'warning', 'destructive'],
    },
  },
};

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

export const Default: Story = {
  args: {
    variant: 'default',
    icon: <Terminal className="h-4 w-4" />,
  },
  render: args => (
    <Alert {...args}>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
    </Alert>
  ),
};

export const Informational: Story = {
  args: {
    variant: 'info',
  },
  render: args => (
    <Alert {...args}>
      <AlertTitle>Note</AlertTitle>
      <AlertDescription>
        This data is refreshed every 24 hours. Last updated: today at 08:00.
      </AlertDescription>
    </Alert>
  ),
};

export const Success: Story = {
  args: {
    variant: 'success',
  },
  render: args => (
    <Alert {...args}>
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>Your profile has been updated successfully.</AlertDescription>
    </Alert>
  ),
};

export const Warning: Story = {
  args: {
    variant: 'warning',
  },
  render: args => (
    <Alert {...args}>
      <AlertTitle>Attention Required</AlertTitle>
      <AlertDescription>
        Your subscription expires in 3 days. Renew to avoid service interruption.
      </AlertDescription>
    </Alert>
  ),
};

export const Destructive: Story = {
  args: {
    variant: 'destructive',
  },
  render: args => (
    <Alert {...args}>
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Failed to save changes. Please try again or contact support.
      </AlertDescription>
    </Alert>
  ),
};