'use client';

import { useState, useEffect } from 'react';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { type Language, type LanguageContent } from '@/lib/languages';

interface ClientLayoutProps {
    children: React.ReactNode;
    lang: Language;
    t: LanguageContent;
}

interface Star {
    left: string;
    top: string;
    animationDelay: string;
    animationDuration: string;
}

export default function ClientLayout({ children, lang, t }: ClientLayoutProps) {
    const [stars, setStars] = useState<Star[]>([]);

    useEffect(() => {
        const generateStars = () => {
            const newStars: Star[] = [];
            for (let i = 0; i < 50; i++) {
                newStars.push({
                    left: `${Math.random() * 100}%`,
                    top: `${Math.random() * 100}%`,
                    animationDelay: `${Math.random() * 2}s`,
                    animationDuration: `${2 + Math.random() * 3}s`,
                });
            }
            setStars(newStars);
        };
        generateStars();
    }, []);

    return (
        <div className="min-h-screen bg-black text-cyan-400 overflow-hidden relative">
            {/* Animated Background */}
            <div className="fixed inset-0 opacity-20">
                <div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-cyan-900/30"></div>
                {stars.map((style, i) => (
                    <div
                        key={i}
                        className="absolute w-1 h-1 bg-cyan-400 rounded-full animate-pulse"
                        style={style}
                    ></div>
                ))}
            </div>

            <Navigation currentLang={lang} t={t} />

            <main className="relative z-10">{children}</main>

            <Footer currentLang={lang} t={t} />
        </div>
    );
}