'use client';

import React from 'react';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Footer props
 * VI: Props cho Footer
 */
export interface FooterProps {
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
}

/**
 * EN: Footer - x.ai style footer with clean layout
 * VI: Footer - Footer theo phong cách x.ai với layout sạch sẽ
 *
 * Features:
 * - Clean minimal design like x.ai
 * - Four column layout (Try Grok On, Products, Company, Resources)
 * - Dark theme with white text
 * - No social media clutter
 *
 * @example
 * ```tsx
 * <Footer />
 * ```
 */
export function Footer({ className }: FooterProps) {
    // EN: Footer sections like x.ai / VI: Các section footer như x.ai
    const footerSections = [
        {
            title: 'Try Grok On',
            links: [
                { label: 'Web', href: '/chat' },
                { label: 'iOS', href: 'https://apps.apple.com/app/apple-store/id6670324846?pt=126952307&ct=x.ai%20Direct%20Link&mt=8' },
                { label: 'Android', href: 'https://play.google.com/store/apps/details?id=ai.x.grok&hl=en' },
                { label: 'Grok on X', href: 'https://x.com/i/grok' },
            ],
        },
        {
            title: 'Products',
            links: [
                { label: 'Grok', href: '/chat' },
                { label: '𝕏', href: 'https://x.com' },
                { label: 'API', href: '/api' },
                { label: 'Grok Enterprise', href: '/grok/business' },
                { label: 'Grokipedia', href: 'https://grokipedia.com' },
            ],
        },
        {
            title: 'Company',
            links: [
                { label: 'Company', href: '/company' },
                { label: 'Careers', href: '/careers' },
                { label: 'Contact', href: '/contact' },
                { label: 'News', href: '/news' },
            ],
        },
        {
            title: 'Resources',
            links: [
                { label: 'Documentation', href: 'https://docs.x.ai' },
                { label: 'Privacy policy', href: '/privacy-policy' },
                { label: 'Security', href: '/security' },
                { label: 'Safety', href: '/safety' },
                { label: 'Legal', href: '/legal' },
                { label: 'Status', href: 'https://status.x.ai' },
            ],
        },
    ];

    return (
        <footer className={cn('bg-black text-white py-16', className)}>
            <div className="container mx-auto px-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {/* Footer sections like x.ai */}
                    {footerSections.map((section) => (
                        <div key={section.title} className="space-y-4">
                            <h3 className="text-white text-sm font-medium mb-6">
                                {section.title}
                            </h3>
                            <ul className="space-y-3">
                                {section.links.map((link) => (
                                    <li key={link.label}>
                                        <a
                                            href={link.href}
                                            className="text-white/60 hover:text-white transition-colors text-sm"
                                            target={link.href.startsWith('http') ? '_blank' : undefined}
                                            rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                                        >
                                            {link.label}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
            </div>
        </footer>
    );
}

/**
 * EN: Minimal Footer - Clean x.ai style minimal footer
 * VI: Footer tối giản - Footer tối giản theo phong cách x.ai
 *
 * @example
 * ```tsx
 * <MinimalFooter />
 * ```
 */
export function MinimalFooter({ className }: FooterProps) {
    return (
        <footer className={cn('bg-black text-white py-8', className)}>
            <div className="container mx-auto px-6">
                <p className="text-white/40 text-sm text-center">
                    © 2024 GoodGo. All rights reserved.
                </p>
            </div>
        </footer>
    );
}
