'use client';

import { useAppDispatch } from '@akinon/next/redux/hooks';
import { toggleMobileMenu } from '@akinon/next/redux/reducers/header';
import clsx from 'clsx';

import { PwaBackButton } from './pwa-back-button';
import { Button, Icon } from '@theme/components';

export default function MobileHamburgerButton() {
  const dispatch = useAppDispatch();

  return (
    <div className="flex sm:hidden">
      <PwaBackButton />
      <Button
        className={clsx([
          'h-auto',
          'bg-transparent',
          'flex',
          'items-center',
          'justify-center',
          'px-0',
          'border-none'
        ])}
        onClick={() => dispatch(toggleMobileMenu())}
      >
        <Icon name="hamburger" size={18} className="text-black" />
      </Button>
    </div>
  );
}