import React from 'react';
import { Link, usePage } from '@inertiajs/react';
import { Facebook, Instagram, Youtube, Music2 } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation'; // <--- Import Hook

// Custom X (Twitter) Icon
const XIcon = ({ className }) => (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={className} fill="currentColor">
        <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
    </svg>
);

export default function RightSidebarFooter() {
    const { t } = useTranslation(); // <--- Initialize Hook
    
    // 1. Get Data from Global Props (Middleware)
    const { footer_data, site_settings } = usePage().props;
    
    // 2. Extract Data with Fallbacks
    const pages = footer_data?.pages || [];
    const social = footer_data?.social || {};
    const siteName = site_settings?.site_name || 'Titan News';

    return (
        <div className="mt-10 px-4">
            
            {/* --- Social Icons (Only show if URL exists) --- */}
            <div className="flex items-center gap-5 text-muted-foreground mb-6">
                {social.social_twitter && (
                    <a href={social.social_twitter} target="_blank" rel="noreferrer" className="hover:text-primary transition-colors" aria-label="X (Twitter)">
                        <XIcon className="w-4 h-4" />
                    </a>
                )}
                {social.social_facebook && (
                    <a href={social.social_facebook} target="_blank" rel="noreferrer" className="hover:text-primary transition-colors" aria-label="Facebook">
                        <Facebook className="w-5 h-5" />
                    </a>
                )}
                {social.social_instagram && (
                    <a href={social.social_instagram} target="_blank" rel="noreferrer" className="hover:text-primary transition-colors" aria-label="Instagram">
                        <Instagram className="w-5 h-5" />
                    </a>
                )}
                {social.social_youtube && (
                    <a href={social.social_youtube} target="_blank" rel="noreferrer" className="hover:text-primary transition-colors" aria-label="YouTube">
                        <Youtube className="w-5 h-5" />
                    </a>
                )}
                {social.social_tiktok && (
                    <a href={social.social_tiktok} target="_blank" rel="noreferrer" className="hover:text-primary transition-colors" aria-label="TikTok">
                        <Music2 className="w-5 h-5" />
                    </a>
                )}
            </div>

            {/* --- Dynamic Pages Grid --- */}
            <div className="flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground leading-relaxed">
                {pages.length > 0 ? (
                    pages.map((page) => (
                        <Link 
                            key={page.slug} 
                            href={route('page.show', page.slug)} 
                            className="hover:underline hover:text-primary transition-colors"
                        >
                            {page.title}
                        </Link>
                    ))
                ) : (
                    <span className="text-muted-foreground/50 italic">
                        {t('_info_pages_not_configured', 'Info pages not configured.')}
                    </span>
                )}
            </div>

            {/* --- Copyright --- */}
            <div className="mt-4 text-xs text-muted-foreground/60">
                &copy; {new Date().getFullYear()} {siteName}. {t('_all_rights_reserved', 'All rights reserved.')}
            </div>
        </div>
    );
}