<script lang="ts">
	let {
		id,
		name,
		value = $bindable(),
		label,
		notice,
		required,
		disabled,
		readonly,
		size = 'md',
		rows = 2
	}: {
		id?: string;
		name?: string;
		value?: string;
		label?: string;
		notice?: string;
		required?: boolean;
		disabled?: boolean;
		readonly?: boolean;
		size?: 'xs' | 'sm' | 'md' | 'lg';
		rows?: number;
	} = $props();
</script>

<div>
	{#if label}
		<label class="label" for={id}>
			<span class="label-text">
				{label}
				{#if required}
					<span class="text-red-700">*</span>
				{/if}
			</span>
		</label>
	{/if}
	<textarea
		class="textarea textarea-bordered w-full"
		class:textarea-xs={size === 'xs'}
		class:textarea-sm={size === 'sm'}
		class:textarea-md={size === 'md'}
		class:textarea-lg={size === 'lg'}
		{id}
		{name}
		{required}
		{disabled}
		{readonly}
		{rows}
		bind:value
	></textarea>
	{#if notice}
		<label class="label" for={id}>
			<span class="label-text-alt">{notice}</span>
		</label>
	{/if}
</div>
