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

@php
    $id = $attributes->get('id', $name);
@endphp

<div {{ $attributes->only('class')->merge(['class' => 'w-full']) }}>
    @if ($label)
        <label for="{{ $id }}" class="tw-label">
            {{ $label }}
            @if ($required)
                <span class="text-[var(--color-danger)]" aria-hidden="true">*</span>
            @endif
        </label>
    @endif

    <input
        type="{{ $type }}"
        name="{{ $name }}"
        id="{{ $id }}"
        @if ($required) required @endif
        @if ($error) aria-invalid="true" aria-describedby="{{ $id }}-error" @elseif ($hint) aria-describedby="{{ $id }}-hint" @endif
        {{ $attributes->except('class')->merge([
            'class' => 'tw-input' . ($error ? ' border-[var(--color-danger)]' : ''),
        ]) }}
    >

    @if ($error)
        <p id="{{ $id }}-error" class="mt-1 text-xs text-[var(--color-danger)]">{{ $error }}</p>
    @elseif ($hint)
        <p id="{{ $id }}-hint" class="mt-1 text-xs text-[var(--color-text-muted)]">{{ $hint }}</p>
    @endif
</div>