"use client";

import { Monitor, Moon, Sun } from "lucide-react";
import { useTheme } from "@/app/lib/theme";

export default function ThemeSwitchFab() {
  const { theme, setTheme } = useTheme();

  const nextTheme =
    theme === "dark" ? "light" : theme === "light" ? "system" : "dark";

  const Icon = theme === "dark" ? Moon : theme === "light" ? Sun : Monitor;

  return (
    <button
      type="button"
      onClick={() => setTheme(nextTheme)}
      className="fixed bottom-4 right-4 z-50 inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-lg transition-colors hover:text-foreground"
      title={`Theme: ${theme} (switch to ${nextTheme})`}
      aria-label={`Theme switch. Current theme is ${theme}`}
    >
      <Icon className="h-4 w-4" />
    </button>
  );
}
