import React from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { InputText } from './index'; // Actualiza la ruta a donde tienes el componente InputText

// Crear un decorador para envolver el contexto del formulario
const withFormProvider = (Story, context) => {
  const methods = useForm();
  return (
    <FormProvider {...methods}>
      <form>
        <Story {...context} />
      </form>
    </FormProvider>
  );
};

const meta = {
  title: 'layout/InputText',
  component: InputText,
  decorators: [withFormProvider],
};

export default meta;

type Story = StoryObj<typeof InputText>;

export const Default: Story = {
  args: {
    label: "Input233",
    placeholder: "Input123123",
    name: "example",  // Asegúrate de proporcionar un nombre para el campo
    id: "example-input", // Asegúrate de proporcionar un ID para el campo
  },
};