@props(['id', 'model', 'label' => null, 'required' => false, 'placeholder' => 'Select date'])

<div>
    @if ($label)
        <label class="block text-sm font-semibold text-zinc-200" for="{{ $id }}">
            {{ $label }}
            @if ($required)
                <span class="helpdesk-required-star">*</span>
            @endif
        </label>
    @endif

    <div class="mt-2" wire:ignore>
        <input id="{{ $id }}" type="text" value="{{ $attributes->get('value') }}" data-helpdesk-flatpickr
            data-wire-model="{{ $model }}" placeholder="{{ $placeholder }}" autocomplete="off"
            {{ $attributes->except('value')->merge([
                'class' =>
                    'block w-full rounded-xl border border-zinc-700 bg-zinc-950 px-4 py-3 text-sm text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40',
            ]) }} />
    </div>
</div>