import type { Meta, StoryObj } from "@storybook/react";
import { TextareaField } from "./TextareaField";

const meta: Meta<typeof TextareaField> = {
	title: "Widgets/Onboarding/Fields/TextareaField",
	component: TextareaField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		value: { control: "text" },
		onChange: { action: "changed" },
		disabled: { control: "boolean" },
		required: { control: "boolean" },
	},
};

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

export const Default: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		value: "",
	},
};

export const WithValue: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		value:
			"This is a sample description that spans multiple lines.\n\nIt demonstrates how the textarea handles longer content.",
	},
};

export const WithDescription: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		description: "Provide a brief overview of your project",
		value: "",
	},
};

export const Required: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		required: true,
		value: "",
	},
};

export const WithError: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		value: "Too short",
		error: "Description must be at least 50 characters",
		touched: true,
	},
};

export const Disabled: Story = {
	args: {
		id: "description",
		label: "Description",
		placeholder: "Enter a description...",
		value: "This content is locked",
		disabled: true,
	},
};

export const CustomRows: Story = {
	args: {
		id: "long-description",
		label: "Detailed Description",
		placeholder: "Enter a detailed description...",
		rows: 8,
		value: "",
	},
};