export const CheckedIcon = ({ disabled }: { disabled?: boolean }) => {
  return (
    <svg
      id="checked-icon"
      className="hidden size-4 max-h-4 max-w-4 group-data-[state=checked]:block"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z"
        fill={disabled ? 'transparent' : 'var(--link)'}
      />
      <path
        d="M4.3335 7.77743L7.03525 10.4994L11.6668 4.66663"
        stroke={
          disabled ? 'var(--input-muted-more-foreground)' : 'var(--input)'
        }
        strokeWidth="1.5"
      />
    </svg>
  )
}