@props(['name', 'label', 'type' => 'text', 'value' => null, 'hint' => null, 'required' => false, 'rows' => 4])
@php
$key = str_replace(['[', ']'], ['.', ''], $name);
$id = 'f-' . str_replace(['[', ']', '.'], ['-', '', '-'], $name);
$cls = 'w-full rounded-2xl border bg-white px-4 text-[15px] text-on-background placeholder:text-outline focus:border-primary focus:outline-none focus:ring-2 focus:ring-tertiary ' . ($errors->has($key) ? 'border-error' : 'border-outline-variant');
@endphp
<div {{ $attributes->only('class') }}>
    <label for="{{ $id }}" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ $label }}@if(!$required) <span class="font-normal text-outline">({{ __('optional') }})</span>@endif</label>
    @if ($type === 'textarea')
        <textarea id="{{ $id }}" name="{{ $name }}" rows="{{ $rows }}" {{ $attributes->except('class') }} class="{{ $cls }} py-3">{{ old($key, $value) }}</textarea>
    @else
        <input id="{{ $id }}" name="{{ $name }}" type="{{ $type }}" value="{{ old($key, $value) }}" @required($required) {{ $attributes->except('class') }} class="{{ $cls }} min-h-[48px]">
    @endif
    @if ($hint) <p class="mt-1 text-xs text-on-surface-variant">{{ $hint }}</p> @endif
    @error($key) <p class="mt-1 text-sm text-error">{{ $message }}</p> @enderror
</div>