import { PianoIcon } from 'lucide-react';
import { navLinks } from '@/lib/constants';

export default function Footer() {
    const handleClick = (id: string) => {
        const el = document.getElementById(id);

        if (el) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <footer className="border-t border-gray-100 bg-white px-6 py-12">
            <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-8 md:flex-row md:items-center">
                <div className="flex items-center gap-2 text-lg font-semibold text-gray-900">
                    <PianoIcon className="h-6 w-auto" />
                    <span>Xuelin Wang Música</span>
                </div>

                <ul className="flex flex-wrap gap-x-8 gap-y-2">
                    {navLinks.map((link) => (
                        <li key={link.id}>
                            <button
                                onClick={() => handleClick(link.id)}
                                className="cursor-pointer text-sm text-gray-400 transition-colors hover:text-gray-900"
                            >
                                {link.title}
                            </button>
                        </li>
                    ))}
                </ul>

                <p className="text-sm text-gray-400">
                    © {new Date().getFullYear()} Xuelin Wang Música. All rights
                    reserved.
                </p>
            </div>
        </footer>
    );
}