"use client";

import { IconMoon, IconSun } from "@tabler/icons-react";

import { useTheme } from "@/providers/theme-provider";

export const ModeToggle = () => {
  const { resolvedTheme, setTheme } = useTheme();
  const isDark = resolvedTheme === "dark";

  return (
    <button
      onClick={() => setTheme(isDark ? "light" : "dark")}
      aria-pressed={isDark}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      className="text-ink-3 hover:text-ink-1 relative flex size-5 items-center justify-center transition-colors"
    >
      <IconMoon
        size={18}
        stroke={1.5}
        aria-hidden="true"
        className="absolute inset-0 m-auto scale-100 rotate-0 transition-all duration-200 dark:scale-0 dark:-rotate-90"
      />
      <IconSun
        size={18}
        stroke={1.5}
        aria-hidden="true"
        className="absolute inset-0 m-auto scale-0 rotate-90 transition-all duration-200 dark:scale-100 dark:rotate-0"
      />
    </button>
  );
};