@props([
    'jabatan' => '',
    'nama'    => '',
    'ttl'     => null,
    'color'   => 'emerald',
    'size'    => 'md',
])

@php
$colors = [
    'amber'   => ['header' => 'bg-amber-500',   'border' => 'border-amber-400',  'text' => 'text-amber-900'],
    'teal'    => ['header' => 'bg-teal-600',    'border' => 'border-teal-400',   'text' => 'text-teal-900'],
    'emerald' => ['header' => 'bg-emerald-700', 'border' => 'border-emerald-500','text' => 'text-emerald-900'],
    'slate'   => ['header' => 'bg-slate-600',   'border' => 'border-slate-400',  'text' => 'text-slate-900'],
    'blue'    => ['header' => 'bg-blue-700',    'border' => 'border-blue-400',   'text' => 'text-blue-900'],
];
$c = $colors[$color] ?? $colors['emerald'];

$widths  = ['lg' => 'w-56', 'md' => 'w-48', 'sm' => 'w-full'];
$pads    = ['lg' => 'pt-0 pb-4 px-3', 'md' => 'pt-0 pb-3 px-2.5', 'sm' => 'pt-0 pb-2.5 px-2'];
$nameSz  = ['lg' => 'text-sm font-black', 'md' => 'text-xs font-extrabold', 'sm' => 'text-[11px] font-bold'];
$ttlSz   = ['lg' => 'text-[11px]', 'md' => 'text-[10px]', 'sm' => 'text-[9px]'];
$headSz  = ['lg' => 'text-[10px] py-1.5 px-3', 'md' => 'text-[9px] py-1 px-2', 'sm' => 'text-[8px] py-1 px-1.5'];
@endphp

<div class="bg-white rounded-xl border-2 {{ $c['border'] }} text-center shadow-lg {{ $widths[$size] }} overflow-hidden hover:-translate-y-1 transition-transform duration-200">
    {{-- Jabatan header --}}
    <div class="{{ $c['header'] }} text-white {{ $headSz[$size] }} font-black uppercase tracking-wider leading-tight">
        {{ $jabatan }}
    </div>
    {{-- Name & TTL body --}}
    <div class="{{ $pads[$size] }} mt-2">
        <p class="{{ $nameSz[$size] }} text-gray-900 leading-snug">{{ $nama }}</p>
        @if($ttl)
            <p class="{{ $ttlSz[$size] }} text-gray-500 font-medium mt-1 leading-tight">{{ $ttl }}</p>
        @endif
    </div>
</div>
