import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { cn } from "@/lib/utils";
import { useEffect, useState } from "react";

const AppearanceDropdown = () => {
    const { setTheme, theme } = useTheme();

    // State untuk tanggal dan waktu
    const [currentTime, setCurrentTime] = useState(new Date());

    useEffect(() => {
        // Update waktu setiap detik
        const interval = setInterval(() => {
            setCurrentTime(new Date());
        }, 1000);

        return () => clearInterval(interval); // Bersihkan interval saat komponen unmount
    }, []);

    // Format tanggal (contoh: Senin, 03 Februari 2025)
    const formattedDate = new Intl.DateTimeFormat("id-ID", {
        weekday: "long",
        day: "2-digit",
        month: "long",
        year: "numeric",
    }).format(currentTime);

    // Format waktu (contoh: 15:01:32)
    const formattedTime = currentTime.toLocaleTimeString("id-ID", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
    });

    return (
        <>
            <div className="flex flex-row items-center justify-center">
                <span className="text-sm px-5 items-center text-right">
                    {formattedDate} <br />
                    {formattedTime}
                </span>
                {/* <div className="px-5">
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="ghost"
                                size="icon"
                                className={cn("h-7 w-7")}
                            >
                                {theme == "light" ? <Sun /> : <Moon />}
                                <span className="sr-only">Toggle theme</span>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => setTheme("light")}>
                                Light
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => setTheme("dark")}>
                                Dark
                            </DropdownMenuItem>
                            <DropdownMenuItem
                                onClick={() => setTheme("system")}
                            >
                                System
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div> */}
            </div>
        </>
    );
};

export default AppearanceDropdown;