import { ThemeColor } from '../types'

export function HeartIcon({
  color
} : {
  color: ThemeColor
}) {
  return (
    <svg
      style={iconStyle} width="20" height="17" viewBox="0 0 20 17"
      fill="none" xmlns="http://www.w3.org/2000/svg"
    >
      <path fill={color} d="M10.4776 14.8938L10.4776 14.8938L10.4763 14.8951L10.0137 15.3577L3.01379 8.35735L2.94308 8.42806L3.01379 8.35735C1.49074 6.83431 1.49072 4.36494 3.01377 2.8419C4.53681 1.31886 7.00616 1.31886 8.5292 2.8419L9.9432 4.2559L10.0139 4.32661L10.0846 4.2559L11.4986 2.84189C13.0217 1.31885 15.491 1.31885 17.0141 2.84189C18.5371 4.36494 18.5371 6.83428 17.0141 8.35733L15.067 10.3044L15.067 10.3044L15.0657 10.3057L15.06 10.3116L15.0594 10.3123L15.0503 10.3215L15.0497 10.3222L10.494 14.8778L10.4934 14.8784L10.4841 14.8875L10.4835 14.8881L10.4776 14.8938ZM9.40425 16.4453L9.47496 16.3746L9.40425 16.4453C9.74084 16.7819 10.2866 16.7819 10.6232 16.4453L11.3177 15.7507C11.3259 15.7429 11.3339 15.735 11.3419 15.727L15.8988 11.17L15.9188 11.1497L15.9219 11.1465L15.9232 11.1452L17.8626 9.20585C19.8543 7.21418 19.8543 3.98504 17.8626 1.99336C15.8709 0.00169104 12.6418 0.00169104 10.6501 1.99336L10.0139 2.62956L9.37773 1.99337C7.38605 0.00169843 4.15691 0.00169784 2.16524 1.99337C0.173566 3.98504 0.173566 7.21419 2.16524 9.20586L9.40425 16.4453Z" stroke="#464646" strokeWidth="0.2"/>
    </svg>
  )
}

const iconStyle = {
  height: 16
}