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

<div>
    <label for="{{ $id }}" class="block mb-2 font-semibold">{{ $label }}</label>
    <input
        type="{{ $type }}"
        id="{{ $id }}"
        name="{{ $name }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        class="w-full bg-dark text-lightcoffee rounded px-4 py-3 placeholder-placeholder focus:outline-none focus:ring-2 focus:ring-accent"
    />
</div>