@props([
    'clearValue' => true,
    'name',
    'autocomplete' => 'off',
    'placeholder' => '',
    'value' => '',
    'focus' => '',
    'invalid' => '',
    'maxLength' => null,
    'disabled' => false,
    'rows' => 3,
])

@php
    $inputId = $attributes->get('id') ?? $name;
    $hasError = $errors->has($name);
@endphp

<div class="fluent-textarea-wrapper">

    <div class="input-group {{ $invalid }} {{ $hasError ? 'is-invalid' : '' }}">

        <textarea
            name="{{ $name }}"
            id="{{ $inputId }}"
            placeholder="{{ $placeholder }}"
            rows="{{ $rows }}"
            {{ $disabled ? 'disabled' : '' }}

            @if($maxLength)
                maxlength="{{ $maxLength }}"
            @endif

            autocomplete="{{ $autocomplete }}"

            {{ $attributes->merge([
                'class' => 'form-control ' . $focus
            ]) }}
        >{{ old($name, $value) }}</textarea>

        {{-- CLEAR BUTTON (REUSE INPUT LOGIC) --}}
        @if($clearValue)
            <x-fluent-button
                variant="subtle"
                icon="dismiss"
                title="Hapus"
                class="btn clear-value-btn py-xs"
            />
        @endif

    </div>

    {{-- ERROR --}}
    <div class="fluent-input-error">
        @if($hasError)
            @foreach($errors->get($name) as $message)
                <div class="fluent-input-error-item">
                    <x-fluent-icon name="warning" class="text-danger" size="sm" />
                    <span>{{ $message }}</span>
                </div>
            @endforeach
        @endif
    </div>

</div>