@props(['member'])

<div class="card mt-3">
    <h2>ข้อมูลส่วนตัว</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <div class="bg-gray-50 p-3 sm:p-4 rounded-lg">
            <strong class="text-gray-700 text-sm block mb-1">ชื่อ-นามสกุล:</strong>
            <span class="text-gray-900">{{ $member->name ?? '' }}</span>
        </div>
        <div class="bg-gray-50 p-3 sm:p-4 rounded-lg">
            <strong class="text-gray-700 text-sm block mb-1">รหัสพนักงาน:</strong>
            <span class="text-gray-900">{{ $member->code ?? '' }}</span>
        </div>
        <div class="bg-gray-50 p-3 sm:p-4 rounded-lg">
            <strong class="text-gray-700 text-sm block mb-1">แผนก:</strong>
            <span class="text-gray-900">{{ $member->department ?? '' }}</span>
        </div>
        <div class="bg-gray-50 p-3 sm:p-4 rounded-lg">
            <strong class="text-gray-700 text-sm block mb-1">ตำแหน่ง:</strong>
            <span class="text-gray-900">{{ $member->position ?? '' }}</span>
        </div>
    </div>
</div>