type CrossCircleIconProps = {
  isOpen: boolean;
};

const CrossCircleIcon = ({ isOpen }: CrossCircleIconProps) => {
  return (
    <span
      className={`bg-[#d2c3ee] text-white w-10 h-10 flex rounded-full items-center justify-center stroke-white group-hover:stroke-black group-hover:bg-[#eee] ${
        isOpen ? "rotate-45" : "rotate-0"
      } transition-all duration-500`}
    >
      <svg
        role="presentation"
        focusable="false"
        width="24px"
        height="24px"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          stroke-width="1px"
          fill="none"
          fill-rule="evenodd"
          stroke-linecap="square"
        >
          <g transform="translate(1.000000, 1.000000)">
            <path d="M0,11 L22,11"></path>
            <path d="M11,0 L11,22"></path>
          </g>
        </g>
      </svg>
    </span>
  );
};

export default CrossCircleIcon;
