// islands/StudyButton.tsx

import { useState } from "preact/hooks";
import { JSX } from "preact/jsx-runtime";

interface StudyButtonProps {
  setCanStudy: any;
}

export default function StudyButton(
  { setCanStudy }: StudyButtonProps,
) {
  //const [clicked, setClicked] = useState(true);

  const handleClick = () => {
    //setClicked(true);
    //onClick();
  };
  const handleStudyClick = (
    event: JSX.TargetedMouseEvent<HTMLButtonElement>,
  ) => {
    //console.log("clicked");
    if (!setCanStudy.value) {
      event.preventDefault();
    }
  };
  return (
    <button
      type="submit"
      form="studyrun"
      class={`w-16 h-16 bg-green-600 hover:bg-green-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 focus:ring-blue-500 focus:ring-opacity-50 ${
        !setCanStudy.value ? "opacity-40" : ""
      }`}
      onClick={handleStudyClick}
    >
      Study
    </button>
  );
}