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

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

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

const THYMUS_PATH =
  "M0.614776 3.27242C1.04131 2.33345 1.68513 -1.94956 2.84622 1.05074L2.86282 1.10934C3.01842 1.56854 3.02559 2.12277 3.18802 2.56832C3.26586 2.65675 3.37743 2.23175 3.61087 1.8066C4.08816 1.02415 4.80242 -0.860666 5.52005 0.768516C5.9669 1.90824 6.12332 3.04843 6.40091 4.23238C6.5567 5.47403 7.12546 6.66165 6.77005 7.91012C6.4382 9.16226 5.13149 12.2708 3.78763 10.0664C3.07336 8.03565 2.24345 10.6348 1.06204 9.71285C-0.119347 8.54251 -0.186757 6.75945 0.239776 5.23531C0.351409 4.56524 0.316938 3.93571 0.614776 3.27242Z";
const SPLEEN_PATH =
  "M18.0064 49.3486C15.4169 43.3983 26.9064 41.3201 29.4927 48.9375C29.8277 49.8422 30.0275 50.611 29.9937 51.2539C29.9497 52.0261 29.6649 52.8597 29.4956 53.6591C29.235 54.8873 28.9879 56.3062 27.9859 57.1601C26.6081 58.3372 24.7835 58.402 23.5513 56.5957C22.6779 55.2688 22.329 53.7951 21.2017 52.5839C20.1355 51.2337 18.8495 50.5533 18.0337 49.3935H18.0298L18.0064 49.3486Z";