import clsx from 'clsx';

interface ClearButtonProps {
  isShow: boolean;
  isError: boolean;
  isActiveWithoutError: boolean;
  onClick: (() => void) | undefined;
}
export const ClearButton = ({ isShow, isError, isActiveWithoutError, onClick }: ClearButtonProps) => {
  return (
    <button
      type="button"
      className={clsx(`absolute right-0 top-1/2 mt-[-8px] h-4 w-4 bg-[url('../img/ipt_reset.svg')] indent-[-9999px]`, {
        'opacity-0': isShow,
        "bg-[url('../img/ipt_reset_onerror.svg')]": isError,
        "bg-[url('../img/ipt_chk.svg')]/[1]": isActiveWithoutError,
      })}
      onClick={onClick}
    >
      삭제
    </button>
  );
};
