@props(['title', 'toggler', 'tptext', 'tntext'])
<div class="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-secondary-dark md:p-7">
    <div class="flex flex-col">
        <p class="text-lg">{{ $title }}</p>
        <p class="text-xs italic text-gray-400">
            {{ $toggler ? $tptext : $tntext }}
        </p>
    </div>
    <div>
        <label class="relative flex items-center justify-between p-2 text-xl group">
            <input type="checkbox"
                class="absolute w-full h-full -translate-x-1/2 rounded-md appearance-none left-1/2 peer"
                {{ $toggler ? 'checked' : '' }} {{ $attributes }} />
            <span
                class="flex items-center flex-shrink-0 w-12 h-6 p-1 ml-4 duration-300 ease-in-out bg-gray-300 rounded-full peer-checked:bg-green-400 after:w-4 after:h-4 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
        </label>
    </div>
</div>
