import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import CreateTextarea from './CreateTextarea';

const meta: Meta<typeof CreateTextarea> = {
  title: 'Create/CreateTextarea',
  component: CreateTextarea,
  parameters: {
    layout: 'padded',
  },
};

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

function CreateTextareaDemo() {
  const [value, setValue] = useState('This is a textarea.');

  return (
    <div className='m-auto w-[400px]'>
      <CreateTextarea
        className='bg-[#333]'
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder='Type something here...'
      />
    </div>
  );
}

export const Default: Story = {
  render: () => <CreateTextareaDemo />,
};