@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)
@push('scripts')
    <script>
        new Cleave('#{{ $attributes->get('id') }}', {
            @if ($mask === 'date')
                date: true,
                datePattern: ['d', 'm', 'Y']
            @elseif ($mask === 'postcode')
                delimiter: '-',
                blocks: [5, 3],
                numericOnly: true,
            @elseif ($mask === 'phone')
                phone: true,
                phoneRegionCode: 'BR'
            @elseif ($mask === 'currency')
                delimiter: '.',
                numeralDecimalMark: ',',
                numeral: true,
                numeralPositiveOnly: true,
                numeralThousandsGroupStyle: 'none',
                numeralDecimalScale: 0,
            @endif
        });
    </script>
@endpush
@endif