'use client';

import Link from "next/link";

interface FooterProps {
    currentLang: string;
    navContent: {
        docs: string;
        contact: string;
    };
}

export function Footer({ currentLang, navContent }: FooterProps) {
    return (
        <footer className="bg-gray-900 text-white py-12">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div className="col-span-1 md:col-span-2">
                        <div className="flex items-center mb-4">
                            <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                <span className="text-white font-bold text-sm">MS</span>
                            </div>
                            <span className="ml-3 text-xl font-semibold">MultiSite</span>
                        </div>
                        <p className="text-gray-400 mb-4">
                            {currentLang === 'en'
                                ? 'Enterprise-grade multi-language static site solution powered by React/Next.js'
                                : '基于 React/Next.js 的企业级多语言静态站点解决方案'}
                        </p>
                    </div>

                    <div>
                        <h3 className="text-lg font-semibold mb-4">
                            {currentLang === 'en' ? 'Resources' : '资源'}
                        </h3>
                        <ul className="space-y-2 text-gray-400">
                            <li>
                                <Link href="/docs" className="hover:text-white transition-colors">
                                    {navContent.docs}
                                </Link>
                            </li>
                            <li>
                                <a href="#" className="hover:text-white transition-colors">
                                    API
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-white transition-colors">
                                    {currentLang === 'en' ? 'Examples' : '示例'}
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 className="text-lg font-semibold mb-4">
                            {currentLang === 'en' ? 'Support' : '支持'}
                        </h3>
                        <ul className="space-y-2 text-gray-400">
                            <li>
                                <a href="/contact" className="hover:text-white transition-colors">
                                    {navContent.contact}
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-white transition-colors">
                                    GitHub
                                </a>
                            </li>
                            <li>
                                <a href="#" className="hover:text-white transition-colors">
                                    {currentLang === 'en' ? 'Community' : '社区'}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                    <p>
                        &copy; 2024 MultiSite.{' '}
                        {currentLang === 'en' ? 'All rights reserved.' : '保留所有权利。'}
                    </p>
                </div>
            </div>
        </footer>
    );
}
