import clsx from "clsx";

import CallToAction from "@/components/call-to-action";
import { type IconVariant } from "@/components/icon";
import List from "@/components/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}>
      <hr />
      <div className={styles.inner}>
        {/* Primary navigation items */}
        <List
          as="nav"
          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>
        </List>

        {/* Social navigation items */}
        <List
          as="nav"
          className={clsx(styles.navList, styles.social)}
          items={socialItems.map((socialItem) => (
            <CallToAction
              key={socialItem.id}
              className={clsx(styles.navLink, styles.social)}
              href={socialItem.href}
              variant="link"
              icon={socialItem.icon as IconVariant}
              ariaLabel={`Find us on ${socialItem.label}`}
            />
          ))}
        />
      </div>
    </footer>
  );
};

export default Footer;