{{--
    Textarea Component
--}}
@props([
    'name'        => '',
    'label'       => '',
    'placeholder' => '',
    'rows'        => 4,
    'value'       => null,
    'hint'        => '',
    'required'    => false,
    'disabled'    => false,
])

@php
    $c = 'block w-full resize-y rounded-lg border border-input bg-card px-3 py-2.5 text-sm text-card-foreground shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400';
    $c .= $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';
@endphp

<div class="space-y-1.5">
    @if($label)
        <label for="{{ $name }}" class="mb-1.5 block text-sm font-medium text-foreground">
            {{ $label }}
            @if($required)
                <span class="ms-0.5 text-red-500" aria-hidden="true">*</span>
            @endif
        </label>
    @endif

    <textarea
        id="{{ $name }}"
        name="{{ $name }}"
        rows="{{ $rows }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge(['class' => $c]) }}
    >{{ old($name, $value) }}</textarea>

    @if($hint && !$errors->has($name))
        <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
    @endif

    <x-forms.error :name="$name" />
</div>