Footer 2

import { cn } from "@/lib/utils.ts";

import { Button } from "@/components/ui/button";

const navLinks = [
    { name: "Features", href: "#" },
    { name: "Integrations", href: "#" },
    { name: "Documentation", href: "#" },
    { name: "Changelog", href: "#" },
    { name: "Pricing", href: "#" },
];

const legalLinks = [
    { name: "Privacy Policy", href: "#" },
    { name: "Terms of Service", href: "#" },
    { name: "Cookie Settings", href: "#" },
];

const socialLinks = [
    {
        name: "Twitter",
        icon: "https://cdn.paceui.com/brand-logos/x.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "GitHub",
        icon: "https://cdn.paceui.com/brand-logos/github.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "LinkedIn",
        icon: "https://cdn.paceui.com/brand-logos/linkedin.svg",
        href: "#",
    },
];

export function Footer2() {
    return (
        <div>
            <div className="bg-muted/60 flex h-36 items-center justify-center border-b border-dashed">
                <p className="text-foreground/25 font-medium">Content Here</p>
            </div>
            <footer className="w-full">
                <div className="mx-auto flex max-w-7xl flex-col items-center gap-6 px-4 py-8 sm:px-6 md:flex-row md:justify-between lg:px-8">
                    <a href="#" className="flex items-center gap-2.5">
                        <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                            P
                        </div>
                        <span className="text-lg font-medium">PaceUI</span>
                    </a>

                    <nav className="text-muted-foreground flex flex-wrap items-center justify-center gap-6 text-sm font-medium">
                        {navLinks.map((link) => (
                            <a key={link.name} href={link.href} className="hover:text-foreground transition-colors">
                                {link.name}
                            </a>
                        ))}
                    </nav>

                    <div className="text-muted-foreground flex items-center gap-1">
                        {socialLinks.map((social) => {
                            return (
                                <Button
                                    key={social.name}
                                    variant="ghost"
                                    size="icon"
                                    aria-label={social.name}
                                    className="hover:text-foreground rounded-full"
                                    render={
                                        <a href={social.href} aria-label={social.name}>
                                            <img
                                                src={social.icon}
                                                className={cn("size-4", { "dark:invert": social.isDarkInvert })}
                                                alt={social.name}
                                            />
                                        </a>
                                    }
                                />
                            );
                        })}
                    </div>
                </div>

                <div className="border-t">
                    <div className="text-muted-foreground mx-auto flex max-w-7xl flex-col items-center gap-4 px-4 py-6 text-sm sm:px-6 md:flex-row md:justify-between lg:px-8">
                        <p>&copy; {new Date().getFullYear()} PaceUI. All rights reserved.</p>

                        <div className="text-muted-foreground flex flex-wrap gap-6">
                            {legalLinks.map((link) => (
                                <a key={link.name} href={link.href} className="hover:text-foreground transition-colors">
                                    {link.name}
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}