import { useState } from "react";
import TextInput from "../components/ui/input/input.tsx";


export default {
    title: 'UI/Input',
    component: TextInput,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    args: {
        placeholder: "Placeholder",
        borderStyle: "square",
        value: "",
        onChange: () => {}
    },
    argTypes: {
        placeholder: {
            control: 'text',
            description: 'Texte affiché quand le champ est vide.',
        },
        borderStyle: {
            control: { type: 'select' },
            options: ['square', 'rounded'],
            description: 'Style de bordure du champ.',
        },
        value: {
            control: 'text',
            description: 'Valeur actuelle du champ de texte.',
        },
        onChange: {
            action: 'changed',
            description: 'Fonction appelée à chaque changement de valeur.',
        },
    },
};

const InputRender = ({ placeholder, borderStyle }) => {
    const [value, setValue] = useState("");

    return <div>
        <p>Value: {value}</p>
        <TextInput placeholder={placeholder} borderStyle={borderStyle} value={value} onChange={e => setValue(e.target.value)} />
    </div>
};

export const Default = (args) => <InputRender {...args} />;
export const Rounded = (args) => <InputRender {...args} />;
Rounded.args = {
    placeholder: "Rounded",
    borderStyle: "rounded",
};