@props(['info', 'head' => 'header', 'foot' => 'footer'])

<div class="flex flex-col w-full py-4">
    <div class="flex flex-col w-full ">
        <div
            class="px-4 py-3 text-gray-800 bg-gray-300 border-t-2 border-green-600 rounded-t-lg dark:border-green-600 dark:text-gray-300 dark:bg-gray-900 ">
            {{$head}}
        </div>
        <div class="text-gray-800 bg-gray-300 dark:text-gray-300 dark:bg-green-600">
            <div class="p-4 bg-gray-300 dark:bg-gray-800">
                <div class="text-lg font-semibold text-center text-gray-800 uppercase dark:text-green-600 ">
                    {{ $info == '' ? 'none' : $info }}
                </div>
            </div>
        </div>
        <div
            class="px-4 py-3 text-gray-800 bg-gray-300 border-b-2 border-green-600 rounded-b-lg dark:border-green-600 dark:text-gray-300 dark:bg-gray-900 ">
            {{$foot}}
        </div>
    </div>
</div>