//---------------------------------------------------
const FrontCard = ({ phrase, open }) => {
  return (
    <motion.div
      onClick={() => open()}
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 1 } }}
      // here is not working...
      exit={{
        rotateY: -180,
        transition: { duration: 1, ease: "easeInOut" },
        opacity: 0,
      }}
    >
      {phrase}
    </motion.div>
  );
};
//---------------------------------------------------
const BackCard = ({ definition, id, term, remove }) => {
  const { play, isFetching } = useVoiceContext({ text: term });
  return (
    <motion.div
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{
        rotateY: -180,
      }}
      animate={{
        rotateY: 0,
        transition: { duration: 1, ease: "easeInOut" },
      }}
    >
      rest...
    </motion.div>
  );
};
//---------------------------------------------------
const FlipCard = (props) => {
  const [opened, handlers] = useDisclosure(false); // from Mantine
  return (
    <div
      style={{
        perspective: "1000px",
      }}
    >
      <AnimatePresence>
        {!opened ? (
          <FrontCard {...props} />
        ) : (
          <BackCard {...props} />
        )}
      </AnimatePresence>
    </div>
  );
};

//---------------------------------------------------
const FrontCard = ({ phrase, open }) => {
  return (
    <motion.div
      onClick={() => open()}
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 1 } }}
      // here is not working...
      exit={{
        rotateY: -180,
        transition: { duration: 1, ease: "easeInOut" },
        opacity: 0,
      }}
    >
      {phrase}
    </motion.div>
  );
};
//---------------------------------------------------
const BackCard = ({ definition, id, term, remove }) => {
  const { play, isFetching } = useVoiceContext({ text: term });
  return (
    <motion.div
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{
        rotateY: -180,
      }}
      animate={{
        rotateY: 0,
        transition: { duration: 1, ease: "easeInOut" },
      }}
    >
      rest...
    </motion.div>
  );
};
//---------------------------------------------------
const FlipCard = (props) => {
  const [opened, handlers] = useDisclosure(false); // from Mantine
  return (
    <div
      style={{
        perspective: "1000px",
      }}
    >
      <AnimatePresence>
        {!opened ? (
          <FrontCard {...props} />
        ) : (
          <BackCard {...props} />
        )}
      </AnimatePresence>
    </div>
  );
};