import type { Meta, StoryObj } from '@storybook/react';
import { FloatingInput } from './floating-input';
import { Mail, Lock } from 'lucide-react';

const meta = {
    title: 'UI/FloatingInput',
    component: FloatingInput,
    tags: ['autodocs'],
    argTypes: {
        label: { control: 'text' },
        error: { control: 'text' },
    },
} satisfies Meta<typeof FloatingInput>;

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

export const Default: Story = {
    args: {
        label: 'Email Address',
        type: 'email',
    },
};

export const WithIcon: Story = {
    args: {
        label: 'Password',
        type: 'password',
        icon: <Lock className="w-5 h-5" />,
    },
};

export const WithError: Story = {
    args: {
        label: 'Email Address',
        type: 'email',
        icon: <Mail className="w-5 h-5" />,
        value: 'invalid-email',
        error: 'Please enter a valid email address',
    },
};