import type {Meta, StoryObj} from "@storybook/react";
import CustomTextArea from "../../components/UI/Forms/CustomTextArea/CustomTextArea";
import {useArgs} from "@storybook/preview-api";
import NarrowContainer from "../../components/UI/Layout/NarrowContainer";
import CustomFormSection from "../../components/UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../components/UI/Forms/CustomLabel/CustomLabel";
import CustomTextField from "../../components/UI/Forms/CustomTextField/CustomTextField";

/**
 *
 * The error appears next to the field
 * not sure if we have it there purpose or not
 *
 */
const meta = {
    title: 'Components/Forms/CustomTextArea',
    component: CustomTextArea,

} satisfies Meta<typeof CustomTextArea>;

export default meta;

type Story = StoryObj<typeof meta>;

export const CustomTextAreaEx: Story = {
    render: (args) => {

        return (
            <NarrowContainer>
                <CustomFormSection>
                    <div className="row">
                        <div className="col-12">
                            <CustomLabel>
                                the label
                            </CustomLabel>
                            <CustomTextArea {...args} />
                        </div>
                    </div>
                </CustomFormSection>
            </NarrowContainer>
        )
    },
    args: {
        onChange: () => {}
    },
    argTypes: {
        hasError: {
            control: 'text'
        }
    }
};