import type { Meta, StoryObj } from '@storybook/react';
import {
  Timeline,
  TimelineItem,
  TimelineDot,
  TimelineContent,
  TimelineHeading,
  TimelineTime,
  TimelineDescription,
} from './timeline';
import { CheckCircle, AlertCircle, LogIn, Mail } from 'lucide-react';
import React from 'react';

type TimelineStoryProps = React.ComponentProps<typeof Timeline> & {
  firstItemHeading?: string;
  firstItemDescription?: string;
  dotVariant?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'destructive' | 'outline';
};

const meta: Meta<TimelineStoryProps> = {
  title: 'UI/Timeline',
  component: Timeline,
  render: args => <Timeline {...args} />,
  argTypes: {
    dotVariant: {
      control: 'select',
      options: ['default', 'primary', 'success', 'info', 'warning', 'destructive', 'outline'],
      description: 'Variant of the first TimelineDot.',
      defaultValue: 'default',
      table: { category: 'TimelineDot' },
    },
    firstItemHeading: {
      control: 'text',
      description: 'The heading for the first timeline item.',
      defaultValue: 'Login',
    },
    firstItemDescription: {
      control: 'text',
      description: 'The description for the first timeline item.',
      defaultValue: 'User logged in from Chrome on macOS',
    },
  },
};

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

export const Default: Story = {
  args: {
    dotVariant: 'default',
    firstItemHeading: 'Login',
    firstItemDescription: 'User logged in from Chrome on macOS',
  },
  render: ({ firstItemHeading, firstItemDescription, dotVariant, ...args }) => (
    <div className="w-[500px]">
      <Timeline {...args}>
        <TimelineItem>
          <TimelineDot variant={dotVariant} icon={<LogIn className="size-4" />} />
          <TimelineContent>
            <TimelineHeading>{firstItemHeading}</TimelineHeading>
            <TimelineTime>Today, 09:00</TimelineTime>
            <TimelineDescription>{firstItemDescription}</TimelineDescription>
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineDot variant="success" icon={<CheckCircle className="size-4" />} />
          <TimelineContent>
            <TimelineHeading>Password Changed</TimelineHeading>
            <TimelineTime>Yesterday, 16:32</TimelineTime>
            <TimelineDescription>User changed their account password</TimelineDescription>
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineDot variant="destructive" icon={<AlertCircle className="size-4" />} />
          <TimelineContent>
            <TimelineHeading>Security Alert</TimelineHeading>
            <TimelineTime>Mon, 10:15</TimelineTime>
            <TimelineDescription>
              Suspicious login attempt blocked from unknown IP
            </TimelineDescription>
          </TimelineContent>
        </TimelineItem>

        <TimelineItem>
          <TimelineDot variant="warning" icon={<Mail className="size-4" />} />
          <TimelineContent>
            <TimelineHeading>Email Verified</TimelineHeading>
            <TimelineTime>Last Friday</TimelineTime>
            <TimelineDescription>New email address successfully verified</TimelineDescription>
          </TimelineContent>
        </TimelineItem>
      </Timeline>
    </div>
  ),
};