import locationIcon from '@/assets/vectors/icons/location.svg';
import magnifierZoomInIcon from '@/assets/vectors/icons/magnifier-zoom-in.svg';
import magnifierZoomOutIcon from '@/assets/vectors/icons/magnifier-zoom-out.svg';
import Image from 'next/image';
import { twMerge } from 'tailwind-merge';
import { useAddtionalActions } from './utils/useAdditionalActions';

export const MapAdditionalActions = (): JSX.Element => {
  const { zoomIn, zoomOut, zoomInToBioEntities } = useAddtionalActions();

  return (
    <div
      className={twMerge(
        'absolute bottom-6 right-6 z-10 flex flex-col gap-4',
        'drop-shadow-secondary',
      )}
    >
      <button
        type="button"
        className="flex h-[48px] w-[48px] items-center justify-center rounded-full bg-white"
        onClick={zoomInToBioEntities}
      >
        <Image src={locationIcon} alt="location icon" height={28} width={28} />
      </button>
      <div className="flex h-auto w-[48px] flex-col items-center justify-center rounded-full bg-white py-2">
        <button
          type="button"
          className="flex h-[48px] w-[48px] items-center justify-center"
          onClick={zoomIn}
        >
          <Image src={magnifierZoomInIcon} alt="location icon" height={24} width={24} />
        </button>
        <div className="h-[1px] w-[32px] bg-[#F1F1F1]" />
        <button
          type="button"
          className="flex h-[48px] w-[48px] items-center justify-center"
          onClick={zoomOut}
        >
          <Image src={magnifierZoomOutIcon} alt="location icon" height={24} width={24} />
        </button>
      </div>
    </div>
  );
};