@props(['label' => null, 'tone' => 'neutral'])

@php
    $toneClass = match ($tone) {
        'plain' => 'bg-white text-[#98A2B3]',
        default => 'bg-[#ECEFF3] text-[#98A2B3]',
    };
@endphp

<div
    {{ $attributes->merge(['class' => "flex flex-col items-center justify-center gap-0.5 px-1 text-center {$toneClass}"]) }}
    role="img"
    aria-label="{{ $label ? 'IMAGE — '.$label : 'IMAGE' }}"
>
    <span class="text-[11px] font-semibold tracking-[0.14em]">IMAGE</span>
    <span data-placeholder-label class="max-w-[95%] text-[9px] font-medium uppercase leading-tight tracking-wide">{{ $label }}</span>
</div>