import type { Meta, StoryObj } from '@storybook/react';
import { Textarea } from './textarea';
import { Label } from '../label';
import React from 'react';

const meta: Meta<typeof Textarea> = {
  title: 'UI/Textarea',
  component: Textarea,
  render: args => <Textarea {...args} />,
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Size variant — controls padding and font size.',
    },
    disabled: {
      control: 'boolean',
    },
  },
};

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

export const Default: Story = {
  args: {
    placeholder: 'Type your message here.',
  },
};

export const WithLabel: Story = {
  render: args => (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message" size={args.size}>
        Your message
      </Label>
      <Textarea {...args} placeholder="Type your message here." id="message" />
    </div>
  ),
};

export const Disabled: Story = {
  args: {
    disabled: true,
    placeholder: 'Textarea is disabled.',
  },
};

/**
 * Size comparison: sm, md (default), lg.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4 max-w-sm">
      <div className="grid gap-1.5">
        <Label size="sm">Small (sm)</Label>
        <Textarea size="sm" placeholder="Small textarea" />
      </div>
      <div className="grid gap-1.5">
        <Label size="md">Medium (md — default)</Label>
        <Textarea size="md" placeholder="Medium textarea" />
      </div>
      <div className="grid gap-1.5">
        <Label size="lg">Large (lg)</Label>
        <Textarea size="lg" placeholder="Large textarea" />
      </div>
    </div>
  ),
};