@props(['dateFrom', 'dateTo'])

@php
    $today = now();
    $presets = [
        'today' => [$today->toDateString(), $today->toDateString()],
        'yesterday' => [$today->copy()->subDay()->toDateString(), $today->copy()->subDay()->toDateString()],
        'week' => [$today->copy()->startOfWeek()->toDateString(), $today->toDateString()],
        'month' => [$today->copy()->startOfMonth()->toDateString(), $today->toDateString()],
        'all' => ['', ''],
    ];
    $active = collect($presets)->search(fn ($range) => $range[0] === $dateFrom && $range[1] === $dateTo);
@endphp

<div class="flex flex-wrap items-center gap-1.5">
    @foreach (['today' => 'Today', 'yesterday' => 'Yesterday', 'week' => 'This Week', 'month' => 'This Month', 'all' => 'All Time'] as $key => $label)
        <button type="button" wire:click="applyDatePreset('{{ $key }}')"
            @class(['rounded-lg px-2.5 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
                'bg-brand-600 text-white' => $active === $key,
                'bg-stone-100 text-stone-600 hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-300 dark:hover:bg-stone-700' => $active !== $key])>
            {{ $label }}
        </button>
    @endforeach
    <div class="ml-1 flex items-center gap-1.5">
        <x-ui.input wire:model.live="dateFrom" type="date" class="w-36" />
        <span class="text-xs text-stone-400">to</span>
        <x-ui.input wire:model.live="dateTo" type="date" class="w-36" />
    </div>
</div>