<script lang="ts">
  interface Props {
    id?: string;
    value?: string | null;
    label?: string;
    required?: boolean;
    readonly?: boolean;

    size?: 'sm';
    dynamicWidth?: boolean;

    rows?: number;
  }

  let { id, value = $bindable(), label, required, readonly, size, dynamicWidth, rows }: Props = $props();
</script>

<fieldset class="fieldset">
  <legend class="fieldset-legend">
    {label}
    {#if required}
      <span class="text-red-700">*</span>
    {/if}
  </legend>
  <textarea
    {id}
    class="textarea"
    class:textarea-sm={size === 'sm'}
    class:w-full={dynamicWidth}
    class:validator={required}
    bind:value
    {required}
    {rows}
    {readonly}
  ></textarea>
</fieldset>
