'use client';

interface FooterProps {
    currentLang: string;
    t: {
        footer: {
            company: string;
            products: string;
            support: string;
            legal: string;
            copyright: string;
        };
    };
}

export default function Footer({ currentLang, t }: FooterProps) {
    return (
        <footer className="relative z-10 border-t border-cyan-500/30 backdrop-blur-sm mt-20">
            <div className="max-w-7xl mx-auto px-6 py-12">
                <div className="grid md:grid-cols-4 gap-8">
                    <div>
                        <div className="text-2xl font-bold text-cyan-400 mb-4">
                            CYBER
                            <span className="text-pink-500">CLOUD</span>
                        </div>
                        <p className="text-gray-400 text-sm">{t.footer.company}</p>
                    </div>

                    <div>
                        <h3 className="text-cyan-400 font-semibold mb-4">{t.footer.products}</h3>
                        <ul className="space-y-2 text-gray-400 text-sm">
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Cloud Servers
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Storage
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Networking
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 className="text-cyan-400 font-semibold mb-4">{t.footer.support}</h3>
                        <ul className="space-y-2 text-gray-400 text-sm">
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Documentation
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    API Reference
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Contact
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 className="text-cyan-400 font-semibold mb-4">{t.footer.legal}</h3>
                        <ul className="space-y-2 text-gray-400 text-sm">
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Privacy Policy
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Terms of Service
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-cyan-400 transition-colors">
                                    Security
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div className="border-t border-cyan-500/30 mt-8 pt-8 text-center text-gray-400 text-sm">
                    <p>{t.footer.copyright}</p>
                </div>
            </div>
        </footer>
    );
}