<script>
  import { boundElements } from 'svelte-preprocess-delegate-events/runtime';
  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
  import { get_current_component } from 'svelte/internal';"use strict";
import Icon from "./Icon.svelte";
export let label = "";
export let helperText = "";
export let errorText = "";
export let placeholder = "";
export let disabled = false;
export let readonly = false;
export let rows = 6;
export let cols = 20;
export let value;

  const textarea0 = boundElements();
  const component0 = get_current_component();
  $: registerDelegatedEvents(textarea0.bounds, component0, (handler) => handler, {});
</script>

<div class="flex flex-col" class:opacity-30={disabled}>
	{#if label}
		<span class="mb-3 font-[500] text-4xl text-stone-950">{label}</span>
	{/if}
	<textarea
		bind:this={textarea0.bounds}
		class={[
			'w-full',
			'py-3',
			'px-5',
			'rounded-lg',
			'focus:ring-sky-500',
			'focus:border-stone-300',
			'focus:ring-2',
			'placeholder:text-stone-400',
			'placeholder:font-regular',
			'placeholder:text-2xl'
		].join(' ')}
		class:border={!readonly}
		class:border-transparent={readonly}
		class:hover:border-stone-400={!disabled && !errorText && !readonly}
		class:border-stone-300={!errorText}
		class:border-rose-500={errorText}
		class:bg-base-100={readonly}
		bind:value
		{rows}
		{cols}
		{placeholder}
		{disabled}
		{readonly}
		{...$$restProps}
	/>
	{#if helperText}
		<span class="mt-3 text-xl text-stone-600">{helperText}</span>
	{/if}
	{#if errorText}
		<div class="mt-2 flex items-center gap-[6px]">
			<Icon iconName="alert-outline" size="sm" color="rose" />
			<span class="text-xl text-rose-600">{errorText}</span>
		</div>
	{/if}
</div>
