"use client"
import { Checkbox } from "@/app/_components/ui/checkbox"
import { Label } from "@/app/_components/ui/label"

interface TimeControlsProps {
    onTimeChange: (time: string) => void
    activeTime: string
}

export default function TimeControls({ onTimeChange, activeTime }: TimeControlsProps) {
    const times = [
        { id: "today", label: "Hari ini" },
        { id: "yesterday", label: "Kemarin" },
        { id: "week", label: "Minggu" },
        { id: "month", label: "Bulan" },
    ]

    return (
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 bg-black/75 rounded-md p-2 flex items-center space-x-4">
            <div className="text-white font-medium mr-2">Waktu</div>
            {times.map((time) => (
                <div key={time.id} className="flex items-center space-x-2">
                    <Checkbox id={time.id} checked={activeTime === time.id} onCheckedChange={() => onTimeChange(time.id)} />
                    <Label htmlFor={time.id} className="text-white text-sm cursor-pointer">
                        {time.label}
                    </Label>
                </div>
            ))}
        </div>
    )
}