@props(["name", "placeholder" => ""])

<div {{ $attributes->class(["relative"]) }}>
    <input type="text" id="{{ $name }}" name="{{ $name }}" placeholder="{{ $placeholder }}" value="{{ old($name) }}" class="peer placeholder-transparent pt-5 pb-1 w-full h-[48px] rounded-md border border-[#8E8E8E] outline-none focuse:shadow-lg focus:bg-gradient-to-b from-white to-gray-100 focus:border-white focus:ring-2 focus:outline-none focus:ring-black" />
    <label for="{{ $name }}" class="absolute left-3 top-1 text-sm text-[#8E8E8E] peer-focus:text-black transition-all peer-placeholder-shown:top-[0.7rem] peer-placeholder-shown:opacity-100 peer-placeholder-shown:text-lg peer-focus:top-1 peer-focus:text-sm peer-aria-[invalid]:text-bridgestone-red">
        {{ $placeholder }}<span class="text-bridgestone-red">*</span>
    </label>
    @error($name)
        <div class="text-bridgestone-red text-sm pt-2">
            {{ $message }}
        </div>
    @enderror
</div>