import { Switch } from '@/components/ui/switch';
import { useTheme } from '@/hooks/useTheme';
import { Moon, Sun } from 'lucide-react';
import { route } from 'ziggy-js';

const Footer = () => {
    const currentYear = new Date().getFullYear();
    const { isDark, toggleTheme } = useTheme();

    return (
        <section className="pt-10">
            <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                <div className="border-t pt-8">
                    <div className="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-y-0">
                        <div className="text-muted-foreground text-sm">© {currentYear} MEMEFAST. All rights reserved.</div>
                        <div className="text-muted-foreground text-sm">
                            Made by{' '}
                            <a href="https://x.com/charlestehio" target="_blank" rel="noopener noreferrer">
                                @charlestehio
                            </a>
                        </div>
                        <div className="flex flex-col items-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6">
                            {/* Theme Toggle */}
                            <div className="flex items-center space-x-2">
                                <Sun className="text-muted-foreground h-4 w-4" />
                                <Switch id="dark-mode" checked={isDark} onCheckedChange={toggleTheme} />
                                <Moon className="text-muted-foreground h-4 w-4" />
                            </div>

                            {/* Navigation Links */}
                            <div className="flex space-x-6">
                                <a href={route('home')} className="text-muted-foreground hover:text-foreground text-sm transition-colors">
                                    Home
                                </a>
                                <a href={route('memes.index')} className="text-muted-foreground hover:text-foreground text-sm transition-colors">
                                    Meme Library
                                </a>
                                <a href={route('terms')} className="text-muted-foreground hover:text-foreground text-sm transition-colors">
                                    Terms
                                </a>
                                <a href={route('privacy')} className="text-muted-foreground hover:text-foreground text-sm transition-colors">
                                    Privacy
                                </a>
                                <a href={route('dmca-copyright')} className="text-muted-foreground hover:text-foreground text-sm transition-colors">
                                    DMCA
                                </a>
                                {import.meta.env.VITE_DISCORD_LINK && (
                                    <a
                                        href={import.meta.env.VITE_DISCORD_LINK}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                                    >
                                        Discord
                                    </a>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Footer;