@props([
'name',
'label' => '',
'accept' => '',
'required' => false,
'helpText' => '',
'class' => '',
])

@php
$hasError = $errors->has($name);
$inputClasses = cn(
'bg-muted text-white rounded-[0.625rem] border px-4 py-3 w-full focus:outline-none focus:ring-2 focus:ring-primary transition-colors file:mr-4 file:py-1 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-medium file:bg-primary/10 file:text-primary hover:file:bg-primary/20 file:cursor-pointer',
$hasError ? 'border-destructive' : 'border-white/10',
$class
);
@endphp

<div>
    @if($label)
    <label for="{{ $name }}" class="block text-sm font-medium text-foreground mb-2">
        {{ $label }}
        @if($required)
        <span class="text-destructive">*</span>
        @endif
    </label>
    @endif

    <input
        type="file"
        id="{{ $name }}"
        name="{{ $name }}"
        {{ $attributes->merge(['class' => $inputClasses]) }}
        @if($accept) accept="{{ $accept }}" @endif
        @if($required) required @endif
        @if($hasError) aria-invalid="true" aria-describedby="{{ $name }}-error" @endif />

    @if($helpText)
    <p class="text-muted-foreground text-xs mt-1.5">{{ $helpText }}</p>
    @endif

    @error($name)
    <p id="{{ $name }}-error" class="text-destructive text-sm mt-1" role="alert">{{ $message }}</p>
    @enderror
</div>