import { motion } from "framer-motion"
import { CgCheck } from "react-icons/cg"

const animationConfig = {
  transition: {
    duration: 0.1,
  },
  exit: { scale: 0.5, opacity: 0 },
  initial: { scale: 0.5, opacity: 0 },
  animate: { scale: 1, opacity: 1 },
}

type MatchIconProps = {
  isChecked: boolean
}

export const MatchIcon = ({ isChecked }: MatchIconProps) => {
  return (
    <div
      className="flex items-center justify-center rounded-full border-2 border-yellow-500 bg-background text-background transition-colors duration-100 min-w-6 min-h-6 w-6 h-6 ml-3.5 mr-3 data-[highlighted=true]:bg-green-500 data-[highlighted=true]:border-green-500"
      data-highlighted={isChecked}
      data-testid="column-checkmark"
    >
      {isChecked && (
        <motion.div {...animationConfig}>
          <CgCheck size="24px" />
        </motion.div>
      )}
    </div>
  )
}
