"use client";

import type { MegaTab } from "@/data/home";
import styles from "./MegaMenu.module.css";

const imageClassMap: Record<string, string> = {
  dress: styles.dress,
  drum: styles.drum,
  notebook: styles.notebook,
  shoes: styles.shoes,
};

export default function MegaMenu({
  tabs,
  tab,
  onTabHover,
}: {
  tabs: MegaTab[];
  tab: MegaTab;
  onTabHover: (id: string) => void;
}) {
  const imageClass = tab.featured.imageClass
    ? imageClassMap[tab.featured.imageClass]
    : undefined;

  return (
    <div className={styles.panel} id="categories-mega">
      <div className={styles.inner}>
        <div className={styles.tabs} role="tablist" aria-label="Category types">
          {tabs.map((item) => {
            const active = item.id === tab.id;
            return (
              <button
                key={item.id}
                type="button"
                role="tab"
                id={`mega-tab-${item.id}`}
                aria-selected={active}
                aria-controls="mega-tab-panel"
                className={`${styles.tab} ${active ? styles.tabActive : ""}`}
                onMouseEnter={() => onTabHover(item.id)}
                onFocus={() => onTabHover(item.id)}
                onClick={() => onTabHover(item.id)}
              >
                <img src={item.icon} alt="" width={15} height={15} />
                <span>{item.label}</span>
                {active ? (
                  <img
                    className={styles.tabChevron}
                    src="/images/icons/chevron.svg"
                    alt=""
                    width={7}
                    height={12}
                  />
                ) : (
                  <span className={styles.tabChevronSlot} />
                )}
              </button>
            );
          })}
        </div>

        <div
          className={styles.body}
          role="tabpanel"
          id="mega-tab-panel"
          aria-labelledby={`mega-tab-${tab.id}`}
        >
          <div className={styles.groups}>
            {tab.groups.map((group, index) => (
              <div className={styles.group} key={`${group.title}-${index}`}>
                <h3>{group.title}</h3>
                {group.links.map((link, linkIndex) => (
                  <a href={link.href} key={`${link.label}-${linkIndex}`}>
                    {link.label}
                  </a>
                ))}
              </div>
            ))}
          </div>

          <div className={styles.featured}>
            <h3 className={styles.featuredTitle}>
              {tab.featured.title.split(" ").map((word, index) => (
                <span key={`${word}-${index}`}>{word}</span>
              ))}
            </h3>
            <img
              className={`${styles.featuredImage} ${imageClass ?? ""}`}
              src={tab.featured.image}
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  );
}