import React from 'react';

export const CheckedIcon = ({
  width = 20,
  height = 20,
  isChecked = false,
  color = '#0A0A0B',
}) => (
  <svg
    width={width}
    height={height}
    fill="none"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    {isChecked ? (
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.16667 2.5H15.8333C16.75 2.5 17.5 3.25 17.5 4.16667V15.8333C17.5 16.75 16.75 17.5 15.8333 17.5H4.16667C3.25 17.5 2.5 16.75 2.5 15.8333V4.16667C2.5 3.25 3.25 2.5 4.16667 2.5ZM7.75 13.575C8.075 13.9 8.6 13.9 8.925 13.575L15.2417 7.25C15.5667 6.925 15.5667 6.4 15.2417 6.075C14.9167 5.75 14.3917 5.75 14.0667 6.075L8.33333 11.8083L5.93333 9.40833C5.60833 9.08333 5.08333 9.08333 4.75833 9.40833C4.60229 9.56403 4.5146 9.7754 4.5146 9.99583C4.5146 10.2163 4.60229 10.4276 4.75833 10.5833L7.75 13.575Z"
        fill={color}
      />
    ) : (
      <path
        d="M5 3.5H15C15.8284 3.5 16.5 4.17157 16.5 5V15C16.5 15.8284 15.8284 16.5 15 16.5H5C4.17157 16.5 3.5 15.8284 3.5 15V5C3.5 4.17157 4.17157 3.5 5 3.5Z"
        stroke={color}
      />
    )}
  </svg>
);