@props([
    'label' => null,
    'name' => null,
    'rows' => 3,
])

@php
    $wireModelKey = collect($attributes->getAttributes())->keys()->first(fn ($key) => str_starts_with((string) $key, 'wire:model'));
    $wireModelValue = $wireModelKey ? $attributes->get($wireModelKey) : null;
    $fieldName = $name ?? $wireModelValue;
    $hasError = $fieldName && $errors->has($fieldName);
    $inputId = 'field-'.str_replace(['.', '[', ']'], '-', $name ?? $wireModelValue ?? uniqid());
@endphp

<div class="grid gap-1.5">
    @if ($label)
        <label for="{{ $inputId }}" class="text-sm font-medium text-stone-700 dark:text-stone-300">
            {{ $label }}
        </label>
    @endif

    <textarea
        id="{{ $inputId }}"
        @if ($name) name="{{ $name }}" @endif
        rows="{{ $rows }}"
        {{ $attributes->except(['label', 'name', 'rows'])->class([
            'block w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500',
            'border-red-400 focus:border-red-500 focus:ring-red-500/30 dark:border-red-500/60' => $hasError,
            'border-stone-300 focus:border-brand-500 focus:ring-brand-500/20 dark:border-stone-700 dark:focus:border-brand-400 dark:focus:ring-brand-400/20' => ! $hasError,
        ]) }}
    ></textarea>

    @if ($hasError)
        <p class="text-xs font-medium text-red-600 dark:text-red-400">{{ $errors->first($fieldName) }}</p>
    @endif
</div>