"use client";

import { useMobileMenu } from "@/components/header/mobile-menu-context";
import { cn } from "@/lib/utils";

type Props = {
  openLabel: string;
  closeLabel: string;
};

export default function MobileMenu({ openLabel, closeLabel }: Props) {
  const { open, toggle } = useMobileMenu();
  const bar =
    "block h-[1.5px] w-6 bg-foreground transition duration-300 motion-reduce:transition-none";

  return (
    <button
      type="button"
      onClick={toggle}
      aria-expanded={open}
      aria-controls="mobile-menu-panel"
      aria-label={open ? closeLabel : openLabel}
      className="flex size-11 flex-col items-center justify-center gap-[5px] nav:hidden"
    >
      <span aria-hidden="true" className={cn(bar, open && "translate-y-[6.5px] rotate-45")} />
      <span aria-hidden="true" className={cn(bar, open && "opacity-0")} />
      <span aria-hidden="true" className={cn(bar, open && "-translate-y-[6.5px] -rotate-45")} />
    </button>
  );
}