import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './button';
import { Mail, Trash2 } from 'lucide-react';

const meta = {
    title: 'Components/UI/Button',
    component: Button,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['default', 'primary', 'destructive', 'outline', 'secondary', 'ghost', 'gaming', 'terminal', 'nature', 'glass'],
        },
        size: {
            control: 'select',
            options: ['default', 'sm', 'lg', 'icon'],
        },
        disabled: { control: 'boolean' },
        asChild: { table: { disable: true } },
    },
    args: {
        children: 'Button',
        variant: 'default',
        size: 'default',
    }
} satisfies Meta<typeof Button>;

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

export const Default: Story = {};

export const Variants = {
    render: () => (
        <div className="flex flex-wrap gap-4 items-center bg-black/80 p-8 rounded-lg">
            <Button variant="default">Default</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="destructive">Destructive</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="primary">Primary</Button>
            <Button variant="link">Link</Button>
            <Button variant="default">Default Alt</Button>
            <Button variant="glass">Glass</Button>
        </div>
    ),
};

export const Sizes = {
    render: () => (
        <div className="flex flex-wrap gap-4 items-center">
            <Button size="lg">Large</Button>
            <Button size="default">Default</Button>
            <Button size="sm">Small</Button>
            <Button size="icon"><Mail className="w-4 h-4" /></Button>
        </div>
    ),
};

export const WithIcon: Story = {
    args: {
        children: 'Email Login',
        icon: <Mail className="w-4 h-4" />,
    },
};

export const Destructive: Story = {
    args: {
        variant: 'destructive',
        children: 'Delete Account',
        icon: <Trash2 className="w-4 h-4" />,
    },
};

export const LoadingState: Story = {
  render: () => (
    <Button disabled>
      Loading...
    </Button>
  ),
};

/** Very long label, very short label, and dark/light context. */
export const VisualStressTest: Story = {
  render: () => (
    <div className="flex flex-col gap-6 min-h-layout-story">
      <div className="flex flex-wrap gap-4 items-center p-4 bg-background rounded-lg">
        <Button>Short</Button>
        <Button>This is a much longer button label to test wrapping and padding</Button>
        <Button size="sm">Sm</Button>
        <Button size="icon"><Mail className="w-4 h-4" /></Button>
      </div>
      <div className="flex flex-wrap gap-4 items-center p-4 bg-muted rounded-lg">
        <Button variant="outline">Outline in muted</Button>
        <Button variant="ghost">Ghost</Button>
      </div>
    </div>
  ),
};