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

const BREAST_PATH =
  "M69.8438 2C70.6451 10.8345 68.3715 18.6386 60.9102 21.7764C50.8924 25.9885 42.3578 23.3784 39.5127 20.8213C37.9582 19.4101 36.5048 16.0566 35.001 16.0566C33.4974 16.0572 32.0447 19.4208 30.4903 20.8213C27.6555 23.3784 19.1209 25.9885 9.09282 21.7764C1.63155 18.6387 -0.650501 10.8344 0.152386 2H69.8438Z";
const LEFT_PATH =
  "M12.9172 15.7864C14.2966 16.5464 14.1514 17.7592 13.4736 18.4718C12.7959 19.1845 11.2841 19.5035 10.1041 18.9497C8.88656 18.3783 8.65291 17.457 8.99608 16.5829C9.44575 15.4374 11.1824 14.8305 12.9172 15.7864Z";
const RIGHT_PATH =
  "M56.1746 15.7864C54.7952 16.5464 54.9404 17.7592 55.6182 18.4718C56.2959 19.1845 57.8077 19.5035 58.9877 18.9497C60.2052 18.3783 60.4389 17.457 60.0957 16.5829C59.646 15.4374 57.9094 14.8305 56.1746 15.7864Z";

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

  return (
    <g className={className} data-organ="breast">
      <path
        d={BREAST_PATH}
        fill="url(#paint_breast)"
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
      <path d={LEFT_PATH} fill={fill} style={{ transition: TRANSITION_STYLE }} />
      <path d={RIGHT_PATH} fill={fill} style={{ transition: TRANSITION_STYLE }} />
      <defs>
        <linearGradient
          id="paint_breast"
          x1="36"
          y1="2"
          x2="36"
          y2="22"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="white" stopOpacity="0" />
          <stop offset="1" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
        </linearGradient>
      </defs>
    </g>
  );
}