import clsx from "clsx";

import CallToAction from "@/components/call-to-action";
import { type IconVariant } from "@/components/icon";
import NavList from "@/components/nav-list";
import type { NavigationItem } from "@/types";

import styles from "./styles.module.scss";

interface FooterProps {
  navItems: NavigationItem[];
  socialItems: NavigationItem[];
}

const Footer = ({ navItems = [], socialItems = [] }: FooterProps) => {
  return (
    <footer className={styles.footer}>
      {/* Primary navigation items */}
      <NavList
        className={styles.navList}
        items={navItems.map((navItem) => (
          <CallToAction
            key={navItem.id}
            className={styles.navLink}
            href={navItem.href}
            variant="link"
            ariaLabel={`Go to the ${navItem.label} page`}
          >
            {navItem.label}
          </CallToAction>
        ))}
      >
        <p className={styles.copyright}>
          &copy; {new Date().getUTCFullYear()} Suno, Inc.
        </p>
      </NavList>

      <CallToAction
        key="suno-link"
        href="https://suno.ai"
        variant="link"
        ariaLabel={`Go to the Suno.ai page`}
        className={styles.sunoLink}
      >
        <svg
          width="17"
          height="17"
          viewBox="0 0 17 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M2.3125 0C1.17341 0 0.25 0.923413 0.25 2.0625V14.4375C0.25 15.5766 1.17341 16.5 2.3125 16.5H14.6875C15.8266 16.5 16.75 15.5766 16.75 14.4375V2.0625C16.75 0.923413 15.8266 0 14.6875 0H2.3125ZM10.6807 2.25005C12.79 2.25005 14.5 4.93632 14.5 8.25H10.1386C10.1386 11.5637 8.42867 14.2499 6.31932 14.2499C4.20997 14.2499 2.5 11.5637 2.5 8.25L6.86137 8.25C6.86137 4.93632 8.57133 2.25005 10.6807 2.25005Z"
            fill="black"
          />
        </svg>
      </CallToAction>
    </footer>
  );
};

export default Footer;