import { TRANSITION_STYLE } from "../constants";
import type { OrganSvgProps } from "../types";

export function Blood({ style, colorScale, isActive = false, className }: OrganSvgProps) {
  const defaultColor = colorScale[200];
  const activeColor = colorScale[300];
  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);

  return (
    <g className={className} data-organ="blood">
      <path
        d={BLOOD_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
    </g>
  );
}

const BLOOD_PATH =
  "M6 6.51934C6 8.44383 4.65873 10 3 10C1.34127 10 0 8.44383 0 6.51934C0 4 3 0 3 0C3 0 6 4 6 6.51934Z";