prowler/ui/components/ThemeSwitch.tsx

"use client";

import type { SwitchProps } from "@heroui/switch";
import { useSwitch } from "@heroui/switch";
import { useIsSSR } from "@react-aria/ssr";
import { VisuallyHidden } from "@react-aria/visually-hidden";
import clsx from "clsx";
import { useTheme } from "next-themes";
import { FC } from "react";
import React from "react";

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/shadcn/tooltip";

import { MoonFilledIcon, SunFilledIcon } from "./icons";

export interface ThemeSwitchProps {
  className?: string;
  classNames?: SwitchProps["classNames"];
}

export const ThemeSwitch: FC<ThemeSwitchProps> = ({
  className,
  classNames,
}) => {
  const { theme, setTheme } = useTheme();
  const isSSR = useIsSSR();

  const onChange = () => {
    theme === "light" ? setTheme("dark") : setTheme("light");
  };

  const {
    Component,
    slots,
    isSelected,
    getBaseProps,
    getInputProps,
    getWrapperProps,
  } = useSwitch({
    isSelected: theme === "light" || isSSR,
    "aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
    onChange,
  });

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Component
          {...getBaseProps({
            className: clsx(
              "px-px transition-opacity hover:opacity-80 cursor-pointer",
              className,
              classNames?.base,
            ),
          })}
        >
          <VisuallyHidden>
            <input {...getInputProps()} />
          </VisuallyHidden>
          <div
            {...getWrapperProps()}
            className={slots.wrapper({
              class: clsx(
                [
                  "h-auto w-auto",
                  "bg-transparent",
                  "rounded-lg",
                  "flex items-center justify-center",
                  "group-data-[selected=true]:bg-transparent",
                  "!text-default-500",
                  "pt-px",
                  "px-0",
                  "mx-0",
                ],
                classNames?.wrapper,
              ),
            })}
          >
            {!isSelected || isSSR ? (
              <SunFilledIcon size={22} />
            ) : (
              <MoonFilledIcon size={22} />
            )}
          </div>
        </Component>
      </TooltipTrigger>
      <TooltipContent>
        {isSelected || isSSR ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </TooltipContent>
    </Tooltip>
  );
};