"use client";

import Link from "next/link";
import Image from "next/image";
import { Facebook, Linkedin, Instagram } from "@esmate/shadcn/pkgs/lucide-react";

const footerMenuItems: { text: string; href: string }[] = [
  {
    text: "Home",
    href: "/",
  },
  {
    text: "Store",
    href: "/store",
  },
  {
    text: "About",
    href: "/about",
  },
  {
    text: "Privacy Policy",
    href: "/privacy"
  }
];

export function Footer() {


  return (
    <footer>
      <div className="inner-div footer-row">
        <div className="footer-left">
          <div className="footer-logo">
            <Image height={144} width={144} className="logo" alt="Honey Scamps" src="/img/honeyscamp-logo.png" />
          </div>
          <div className="footer-social-icons">
            <div>
              <Link href="/">
                <span className="sr-only">Facebook</span>
                <Facebook className="footer-social-icon" />
              </Link>
            </div>
            <div>
              <Link href="/">
                <span className="sr-only">LinkedIn</span>
                <Linkedin className="footer-social-icon" />
              </Link>
            </div>
            <div>
              <Link href="/">
                <span className="sr-only">Instagram</span>
                <Instagram className="footer-social-icon" />
              </Link>
            </div>
          </div>
        </div>
        <div className="footer-right">
          <div>
            <ul className="footer-nav">
              <li className="nav-label">Pages</li>
              {footerMenuItems.map(({ text, href }) => (
                <li key={href}>
                  <Link href={href}>{text}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <div className="copyright-block inner-div not-mobile">Copyright 2026, Lore Sjöberg, All Rights Reserved</div>
    </footer>
  );
}