// islands/ClearCheckedButton.// islands/ClearCheckedButton.tsx

interface ClearCheckedButtonProps {
  clearSig: { value: number };
  setCanStudy: { value: number };
}

export default function ClearCheckedButton(
  { clearSig, setCanStudy }: ClearCheckedButtonProps,
) {
  function handleClearCheckedClick(): void {
    // Use a monotonically-changing value so repeated clicks always notify.
    if (!setCanStudy.value) {
      clearSig.value = clearSig.value >= 0 ? -1 : (clearSig.value - 1);
    } else {
      clearSig.value = clearSig.value <= 0 ? 1 : (clearSig.value + 1);
    }
  }

  const isAllMode = !setCanStudy.value;

  return (
    <button
      type="button"
      class={`
        w-8 h-8 
        ${
        isAllMode
          ? "bg-blue-600 hover:bg-blue-700"
          : "bg-red-600 hover:bg-red-700"
      } 
        text-white font-bold 
        rounded-full 
        shadow-lg 
        transition-all duration-300 ease-in-out 
        transform hover:scale-110 
        focus:outline-none focus:ring-2 ${
        isAllMode ? "focus:ring-blue-500" : "focus:ring-red-500"
      } focus:ring-opacity-50
        flex flex-col justify-center items-center
      `}
      onClick={handleClearCheckedClick}
    >
      <span class="text-[10px] leading-none">
        {isAllMode ? "All" : "Clear"}
      </span>
    </button>
  );
}