import React from 'react';
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faFacebook, faGoogle } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from '@inertiajs/react';
import styles from './Footer.module.css';

const BrandsIcons = {
    faFacebook,
    faGoogle,
}

interface FooterLink {
    type: 'link';
    data: {
        name: string;
        icon?: keyof typeof BrandsIcons;
        link: string;
        external: boolean;
    };
}

export default function Footer() {
    const [links, setLinks] = React.useState<FooterLink[]>([]);

    React.useEffect(() => {
        fetch('/api/footer')
            .then(res => res.json())
            .then(response => {
                if (response.status === 'success') {
                    setLinks(response.data);
                }
            })
            .catch(error => {
                console.error('Error fetching footer links:', error);
            });
    }, []);
    return (
        <footer className={styles.footer}>
            <div className={styles.links}>
                {links && links.length > 0 && links.map((link, index) => {
                    const icon: IconDefinition | null = link.data.icon ? BrandsIcons[link.data.icon] : null;

                    const linkContent = (
                        <>
                            {icon && <FontAwesomeIcon icon={icon} className={styles['footer-icons']} />}
                            {link.data.name}
                        </>
                    );

                    return link.data.external ? (
                        <a
                            key={index}
                            href={link.data.link}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center text-white/80 hover:text-accent transition-colors"
                        >
                            {linkContent}
                        </a>
                    ) : (
                        <Link
                            key={index}
                            href={link.data.link}
                            className="flex items-center text-white/80 hover:text-accent transition-colors"
                        >
                            {linkContent}
                        </Link>
                    );
                })}
            </div>
            <div>© {new Date().getFullYear()} GHOST PIZZA Krzysztof Szymański. Wszelkie prawa zastrzeżone.</div>
            <div>Wykonane przez <a target="_blank" rel="noreferrer" href='https://bwitek.dev'>BWitek.dev</a></div>
        </footer>
    );
}