@props(['label' => null, 'name' => null, 'hint' => null, 'required' => false, 'error' => null, 'rows' => 4])

@php
    $id = $attributes->get('id') ?? $name ?? 'f-'.uniqid();
    $error ??= $name ? ($errors->first($name) ?: null) : null;
@endphp

<div class="w-full">
    @if ($label)
        <label for="{{ $id }}" class="mb-1.5 block text-sm font-medium text-slate-800">
            {{ $label }}
            @if ($required)<span class="text-red-600" aria-hidden="true">*</span>@endif
        </label>
    @endif

    <textarea
        id="{{ $id }}"
        rows="{{ $rows }}"
        @if ($name) name="{{ $name }}" @endif
        @if ($required) required aria-required="true" @endif
        @if ($error) aria-invalid="true" @endif
        {{ $attributes->class([
            'block w-full rounded-lg border px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition
             placeholder:text-slate-400 focus:outline-none focus:ring-2',
            'border-slate-300 focus:border-brand-700 focus:ring-brand-700/30' => ! $error,
            'border-red-400 focus:border-red-500 focus:ring-red-500/30' => $error,
        ]) }}
    >{{ $slot }}</textarea>

    @if ($hint && ! $error)<p class="mt-1.5 text-xs text-slate-500">{{ $hint }}</p>@endif
    @if ($error)<p class="mt-1.5 text-xs text-red-600">{{ $error }}</p>@endif
</div>
