import Link from "next/link"
import Image from "next/image"

export function SiteFooter() {
  const categories = [
    { name: "3D Monuments", href: "/category/3d-monuments" },
    { name: "Baby", href: "/category/baby" },
    { name: "Basket", href: "/category/basket" },
    { name: "Birthday", href: "/category/birthday" },
    { name: "Christmas", href: "/category/christmas" },
    { name: "My Account", href: "/account" },
    { name: "Sentiments", href: "/category/sentiments" },
    { name: "Shop", href: "/shop" },
    { name: "Specialty", href: "/category/specialty" },
    { name: "Valentines Day", href: "/category/valentines" },
    { name: "Wedding Cards", href: "/category/wedding" },
  ]

  return (
    <footer className="border-t bg-card mt-16">
      <div className="container mx-auto px-4 py-8">
        <div className="flex justify-center mb-6">
          <Link href="/">
            <Image src="/logo.png" alt="Paper Presents" width={240} height={43} className="h-10 w-auto" />
          </Link>
        </div>

        <nav className="flex flex-wrap items-center justify-center gap-4 text-sm">
          {categories.map((category, index) => (
            <div key={category.name} className="flex items-center gap-4">
              <Link href={category.href} className="hover:text-primary transition-colors">
                {category.name}
              </Link>
              {index < categories.length - 1 && <span className="text-muted-foreground">•</span>}
            </div>
          ))}
        </nav>
        <div className="text-center mt-6 text-sm text-muted-foreground">
          Paper Presents | © {new Date().getFullYear()}
        </div>
      </div>
    </footer>
  )
}