<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	export let id: string | null = null;
	export let name: string | null = null;
	export let value: string | null = null;
	export let label: string | null = null;
	export let notice: string | null = null;
	export let required = false;
	export let disabled = false;
	export let readonly = false;
	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
	export let rows = 2;

	const dispatch = createEventDispatcher();
</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 w-full"
		class:textarea-xs={size === 'xs'}
		class:textarea-sm={size === 'sm'}
		class:textarea-md={size === 'md'}
		class:textarea-lg={size === 'lg'}
		class:textarea-bordered={!readonly}
		{id}
		{name}
		{required}
		{disabled}
		{readonly}
		{rows}
		bind:value
		on:click={(e) => dispatch('click', e)}
	/>
	{#if notice}
		<label class="label" for={id}>
			<span class="label-text-alt">{notice}</span>
		</label>
	{/if}
</div>
