@props([
    'mask' => null,
    'state' => null,
])

<div class="mt-1 rounded-md shadow-sm">
    <input
        {{ $attributes }}
        type="text"
        class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5
        @if ($state === false) border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @endif"
    />
</div>

@if ($mask === 'date')
@push('scripts')
    <script>
        new Cleave('#{{ $attributes->get('id') }}', {
            date: true,
            datePattern: ['d', 'm', 'Y']
        });
    </script>
@endpush
@endif