{{--
  FORMS GROUP
  Các variant: input (text input), checkbox
  Usage: <x-ui.forms type="input" ... /> hoặc <x-ui.forms type="checkbox" ... />
--}}
@props([
    'type' => 'input', // 'input' | 'checkbox'
    
    // input
    'name' => '',
    'id' => null,
    'typeInput' => 'text', // text, email, number, password, url
    'placeholder' => '',
    'value' => '',
    'required' => false,
    'class' => '',
    'attributes' => [],
    
    // checkbox
    'label' => '',
    'checked' => false,
    'checkboxClass' => 'filter-contact',
])

@switch($type)

    @case('input')
        <input
            type="{{ $typeInput }}"
            name="{{ $name }}"
            @if($id) id="{{ $id }}" @endif
            @if($placeholder) placeholder="{{ $placeholder }}" @endif
            value="{{ $value }}"
            @if($required) required @endif
            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-600 {{ $class }}"
            {{ $attributes }}
        />
        @break

    @case('checkbox')
        <label class="flex items-center cursor-pointer {{ $class }}">
            <input
                type="checkbox"
                name="{{ $name }}"
                @if($id) id="{{ $id }}" @endif
                value="{{ $value }}"
                @if($checked) checked @endif
                class="form-checkbox h-4 w-4 text-primary-600 {{ $checkboxClass }}"
            />
            @if($label)
                <span class="ml-2">{{ $label }}</span>
            @endif
        </label>
        @break

@endswitch
