@props([
'name',
'label' => '',
'placeholder' => '',
'required' => false,
'rows' => 5,
'class' => '',
])

@php
$hasError = $errors->has($name);
$wrapperClasses = cn(
    'border-input bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none min-w-0',
    'has-[textarea:focus]:border-ring has-[textarea:focus]:ring-ring/50 has-[textarea:focus]:ring-[3px]',
    $hasError ? 'border-destructive ring-destructive/20' : '',
    $class
);
$textareaClasses = 'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 text-foreground placeholder:text-muted-foreground text-base md:text-sm px-3 w-full outline-none min-h-[120px]';
@endphp

<div class="grid gap-2">
    @if($label)
        <label for="{{ $name }}" class="flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none">
            {{ $label }}
        </label>
    @endif

    <div class="{{ $wrapperClasses }}">
        <textarea
            id="{{ $name }}"
            name="{{ $name }}"
            rows="{{ $rows }}"
            placeholder="{{ $placeholder }}"
            class="{{ $textareaClasses }}"
            @if($required) required @endif
            @if($hasError) aria-invalid="true" aria-describedby="{{ $name }}-error" @endif
        >{{ old($name) }}</textarea>
    </div>

    @error($name)
        <p id="{{ $name }}-error" class="text-destructive text-sm" role="alert">{{ $message }}</p>
    @enderror
</div>