"use client";

import { memo } from "react";
import { useTranslation } from "../../contexts/MessagesContext";

export type MenuSizeValue =
  | "X Small"
  | "Small"
  | "Medium"
  | "Large"
  | "X Large";

interface MenuProps extends React.HTMLAttributes<HTMLElement> {
  children?: React.ReactNode;
  className?: string;
  /**
   * Menu size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
   * @default "X Small"
   */
  size?: MenuSizeValue;
}

const Menu = memo<MenuProps>(
  ({ children, className = "", size: sizeProp = "X Small", ...props }) => {
    const size = sizeProp ?? "X Small";
    const t = useTranslation("menu");

    // Size styles based on Figma specifications
    const sizeStyles: Record<
      "X Small" | "Small" | "Medium" | "Large" | "X Large",
      string
    > = {
      "X Small":
        "px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-025)] rounded-[var(--space-100)]",
      Small:
        "px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-100)] rounded-[var(--space-100)]",
      Medium:
        "px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-100)] rounded-[var(--space-100)]",
      Large:
        "px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-300)] rounded-[var(--space-100)]",
      "X Large":
        "px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-300)] rounded-[var(--space-100)]",
    };

    const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;

    return (
      <nav
        className={baseStyles}
        role="menubar"
        aria-label={t("ariaLabel")}
        {...props}
      >
        {children}
      </nav>
    );
  },
);

Menu.displayName = "Menu";

export default Menu;