@props(['type'=>null, 'icon'=>null, 'title'=>null ])
@php
    switch ($type) {
        case 'create':
            $icon="fa-solid fa-plus"; $title="Create";
            break;
        case 'edit':
            $icon="fa-solid fa-pen text-xs"; $title="Edit";
            break;
        case 'data':
            $icon="fa-solid fa-magnifying-glass"; $title="Data";
            $icon="fa-solid fa-caret-right"; $title="Data";
            break;
        case 'task':
            $icon="fa-solid fa-inbox"; $title="Task";
            $icon="fa-regular fa-clipboard"; $title="Task";
            $icon="fa-solid fa-check"; $title="Task";
            break;
        default:
            break;
    }
@endphp
<div {{ $attributes->merge(['class' => "bg-white border border-secondary-50 text-secondary-900 min-w-fit shadow-sm sm:rounded-lg"]) }} ">
<div class="flex flex-col">
    <!-- header -->
    <div class="card-header bg-secondary-50 h-9 px-4 flex items-center ">
        @isset($header)
        {{$header}}
        @else
            @isset($type)
                <i class="{{$icon}} text-secondary-700 mr-2"></i>
                {{-- <span class="mx-2 font-bold">｜</span> --}}
                <span class="tracking-wider font-sansf font-bold">{{$title}}</span>
            @else
                @isset($icon)
                <i class="{{$icon}} text-secondary-700"></i>
                <span class="mr-1 font-bold">｜</span> 
                @endisset
                <span class="tracking-wider text-sm">{{$title}}</span>
            @endisset
        @endisset
    </div>
    <!-- contents -->
    <div class="px-4 pt-2 pb-3">
        {{$slot}}
    </div>
</div>
</div>