"use client";

import { useSyncExternalStore } from "react";
import { MoonIcon } from "lucide-react";
import { useTheme } from "next-themes";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

const subscribe = () => () => {};

export function ThemeSwitch() {
  const { resolvedTheme, setTheme } = useTheme();
  // Tema baru diketahui di browser; false di server dan saat hydration supaya HTML-nya sama.
  const mounted = useSyncExternalStore(
    subscribe,
    () => true,
    () => false,
  );

  return (
    <Label className="px-2 py-1 font-normal">
      <MoonIcon className="size-4 text-muted-foreground" />
      <span className="flex-1">Mode gelap</span>
      <Switch
        checked={mounted && resolvedTheme === "dark"}
        disabled={!mounted}
        onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
      />
    </Label>
  );
}