import { Moon, Sun, Languages } from "lucide-react"
import { Button } from "./ui/button"
import { useTheme } from "./ThemeProvider"
import { useTranslation } from "../hooks/useTranslation"

export function SettingsMenu() {
  const { theme, setTheme } = useTheme()
  const { lang, setLanguage } = useTranslation()

  return (
    <div className="flex items-center gap-2">
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        className="text-slate-900 dark:text-slate-50"
      >
        {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
      </Button>
      
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setLanguage(lang === "fa" ? "en" : "fa")}
        className="text-slate-900 dark:text-slate-50 font-bold"
      >
        <Languages className="h-5 w-5" />
      </Button>
    </div>
  )
}