import React from 'react';
import styles from './Footer.module.css';
import Link from 'next/link';
import { footerLinks, footerSocials } from '@/data/mockApi';
import Image from 'next/image';
import { Twitter, Linkedin, Instagram, Youtube } from 'lucide-react';

const Footer = () => {
    const renderSocialIcon = (name: string) => {
        switch (name) {
            case 'Twitter': return <Twitter size={20} />;
            case 'Linkedin': return <Linkedin size={20} />;
            case 'Instagram': return <Instagram size={20} />;
            case 'Youtube': return <Youtube size={20} />;
            default: return null;
        }
    };

    return (
        <footer className={styles.footer}>
            <div className={styles.container}>
                <div className={styles.top}>
                    {/* Socials & Description Column (New) */}
                    <div className={styles.column}>
                        <div className={styles.logo}>
                            <Image src="/logo.png" alt="Logo" width={160} height={100} />
                        </div>
                        <p className={styles.bio} style={{ marginBottom: '1rem' }}>
                            We are a team of passionate individuals dedicated to providing the best possible experience for our users.
                        </p>
                        <div className={styles.socials}>
                            {footerSocials.map((social, i) => (
                                <a key={i} href={social.href} className={styles.socialIcon} aria-label={social.icon}>
                                    {renderSocialIcon(social.icon)}
                                </a>
                            ))}
                        </div>
                    </div>

                    <div className={styles.column}>
                        <h4 className={styles.colTitle}>Product</h4>
                        {footerLinks.product.map((link, i) => (
                            <Link key={i} href={link.href} className={styles.link}>{link.label}</Link>
                        ))}
                    </div>
                    <div className={styles.column}>
                        <h4 className={styles.colTitle}>Resources</h4>
                        {footerLinks.resources.map((link, i) => (
                            <Link key={i} href={link.href} className={styles.link}>{link.label}</Link>
                        ))}
                    </div>
                    <div className={styles.column}>
                        <h4 className={styles.colTitle}>Company</h4>
                        {footerLinks.company.map((link, i) => (
                            <Link key={i} href={link.href} className={styles.link}>{link.label}</Link>
                        ))}
                        <Link href="/terms" className={styles.link}>Terms</Link>
                    </div>
                </div>

                <div className={styles.bottom}>
                    <p className={styles.copy}>&copy; 2026 Heystic. All rights reserved.</p>
                </div>
            </div>
        </footer>
    );
};

export default Footer;