const HealthHeart = ({
  health,
  size,
}: {
  health: number | undefined
  size: number
}) => {
  const styles = {
    height: `${size}px`,
    width: `${size}px`,
  }

  return (
    <svg
      id="account-step-eleven"
      xmlns="http://www.w3.org/2000/svg"
      className={
        health
          ? health > 15 && health < 50
            ? 'text-th-warning'
            : health >= 50
            ? 'text-th-success'
            : 'text-th-error'
          : 'text-th-fgd-4'
      }
      style={styles}
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <g transform-origin="center">
        <path
          fillRule="evenodd"
          d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
          clipRule="evenodd"
        />
        <animateTransform
          attributeName="transform"
          type="scale"
          keyTimes="0;0.5;1"
          values="1;1.1;1"
          dur={
            health
              ? health > 15 && health < 50
                ? '1s'
                : health >= 50
                ? '2s'
                : '0.33s'
              : '0s'
          }
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0.8;1;0.8"
          dur={
            health
              ? health > 15 && health < 50
                ? '1s'
                : health >= 50
                ? '2s'
                : '0.33s'
              : '0s'
          }
          repeatCount="indefinite"
        />
      </g>
    </svg>
  )
}

export default HealthHeart