@props([
    'id' => null,
    'error' => '',
    'label' => '',
    'name' => '',
    'placeholder' => '',
    'type' => 'text',
    'value' => '',
])

@php
    $id = $id ?: $name;

    if (!$error && $errors->has($name)) {
        $error = $errors->first($name);
    }
@endphp

<div>
    <label for="{{ $id }}" @class([
        'block mb-2 font-bold empty:hidden',
        'text-red-500' => $error,
        'text-neutral-100' => !$error,
    ])>{{ $label }}</label>

    <input id="{{ $id }}" name="{{ $name }}" type="{{ $attributes->get('type', $type) }}"
        placeholder="{{ $placeholder }}" value="{{ old($name, $value) }}" aria-invalid="{{ $error ? 'true' : 'false' }}"
        aria-describedby="{{ $error ? $id . '-error' : '' }}"
        {{ $attributes->merge([
            'class' =>
                'flex cursor-text w-full px-[1.875rem] py-3 rounded-2xl border border-neutral-700 border-solid bg-neutral-800 outline-none transition hover:shadow',
        ]) }}>

    @if ($error)
        <p id="{{ $id }}-error" class="mt-2 text-sm text-red-600">
            {{ $error }}
        </p>
    @endif
</div>