import { clx } from "@/helpers/utils";
import { SearchNormal1 } from "iconsax-react";
import { type FC } from "react";

export type ZoomButtonProps = {
  isActive: boolean;
  onToggle: () => void;
};

const ZoomButton: FC<ZoomButtonProps> = ({ isActive, onToggle }) => (
  <button
    type="button"
    onClick={onToggle}
    aria-label={isActive ? "غیرفعال کردن ذره‌بین" : "فعال کردن ذره‌بین"}
    aria-pressed={isActive}
    title={isActive ? "غیرفعال کردن ذره‌بین" : "فعال کردن ذره‌بین"}
    className={clx(
      "p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full transition-all",
      isActive
        ? "bg-gray-200 ring-2 ring-gray-400 hover:bg-gray-200"
        : "hover:bg-gray-100 active:bg-gray-200",
    )}
  >
    <SearchNormal1
      color="black"
      size={20}
      variant={isActive ? "Bold" : "Outline"}
      className="text-gray-700 md:w-6 md:h-6"
    />
  </button>
);

export default ZoomButton;