import { Moon, Sun } from "lucide-react";
import { useTheme, ThemeProvider } from "@/Components/ThemeProvider";
import { Button } from "@/Components/ui/button";
import { Link } from "@inertiajs/react";
import { useTranslation } from "@/hooks/useTranslation";
import Logo from "@/Components/Logo"; 

export function ThemeToggle() {
    const { theme, setTheme } = useTheme();
    const { t } = useTranslation();

    return (
        <Button
            variant="ghost"
            size="icon"
            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
            className="absolute top-4 right-4 rounded-full z-50"
        >
            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">{t('Toggle theme')}</span>
        </Button>
    );
}

export default function AuthLayout({ children }) {
    return (
       <ThemeProvider defaultTheme="system" storageKey="app-ui-theme">
            <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-background text-foreground transition-colors duration-300">
                <ThemeToggle />
                
                <Link href="/" className="w-full mb-6 mt-10 sm:mt-0 flex items-center justify-center hover:opacity-80 transition-opacity outline-none">
                    
                    <Logo 
                        className="w-[140px] h-[70px] sm:w-[180px] sm:h-[90px] justify-center mx-auto text-center" 
                        alignment="object-center" 
                    />
                    
                </Link>

                <div className="w-full sm:max-w-md px-6 py-4">
                    {children}
                </div>
            </div>
        </ThemeProvider>
    );
}