import { cx } from "./styles";

/* The Figma menu icon (20:224) is three 20x2 rectangles in a 24x24 box with a
   5px gap - not an exported asset, so it is drawn with the same geometry here.
   `open` folds the outer two into a cross and fades the middle one, which is
   what the drawer's close control needs. */
const BAR = "block h-[2px] w-[20px] rounded-pill bg-[var(--text-primary)]";

const BAR_MOTION =
  "transition-[transform,opacity] duration-[var(--motion-duration-fast)] " +
  "ease-[var(--motion-ease-standard)]";

export interface MenuBarsProps {
  /** true renders the cross (close), false the hamburger. */
  open?: boolean;
  className?: string;
}

export function MenuBars({ open = false, className }: MenuBarsProps) {
  return (
    <span
      aria-hidden="true"
      className={cx(
        "flex size-lg flex-col items-center justify-center gap-[5px]",
        className,
      )}
    >
      <span className={cx(BAR, BAR_MOTION, open && "translate-y-[7px] rotate-45")} />
      <span className={cx(BAR, BAR_MOTION, open && "opacity-0")} />
      <span className={cx(BAR, BAR_MOTION, open && "-translate-y-[7px] -rotate-45")} />
    </span>
  );
}