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

export function Growth({ 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="growth">
      <path
        d={GROWTH_PATH}
        fill={fill}
        stroke={style?.stroke}
        strokeWidth={style?.strokeWidth}
        style={{ transition: TRANSITION_STYLE }}
      />
    </g>
  );
}

const GROWTH_PATH =
  "M11.5469 10H6.77344V339H11.5469L5.77344 349L0 339H4.77344V10H0L5.77344 0L11.5469 10Z";