"use client";

import { useEffect, useState } from "react";

export function CurrencyToggle() {
    const [currency, setCurrency] = useState<"USD" | "CAD">("USD");

    const toggle = () => {
        setCurrency((prev) => (prev === "USD" ? "CAD" : "USD"));
        // In a real app, this would update a context or store
        document.documentElement.style.setProperty("--currency-symbol", currency === "USD" ? "'C$'" : "'$'");
    };

    return (
        <button
            onClick={toggle}
            className="flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-medium text-secondary-foreground transition-colors hover:bg-muted"
        >
            <span className={currency === "USD" ? "text-primary font-bold" : "text-muted-foreground"}>USD</span>
            <span className="h-3 w-[1px] bg-muted-foreground/20" />
            <span className={currency === "CAD" ? "text-primary font-bold" : "text-muted-foreground"}>CAD</span>
        </button>
    );
}

export function MoodToggle() {
    const [isDark, setIsDark] = useState(false);

    useEffect(() => {
        if (document.documentElement.classList.contains("dark")) {
            setIsDark(true);
        }
    }, []);

    const toggle = () => {
        const next = !isDark;
        setIsDark(next);
        if (next) {
            document.documentElement.classList.add("dark");
        } else {
            document.documentElement.classList.remove("dark");
        }
    };

    return (
        <button
            onClick={toggle}
            className="rounded-full p-2 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
            title="Toggle Mood Mode"
        >
            {isDark ? (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            ) : (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
            )}
        </button>
    );
}
