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

export function Constitutional({ style, colorScale, isActive = false, className }: OrganSvgProps) {
  const fill = style?.fill ?? "none";
  const defaultColor = colorScale[100];
  const activeColor = colorScale[200];
  const defaultStroke = isActive ? activeColor : defaultColor;
  const stroke = style?.strokeWidth ? style.stroke : defaultStroke;

  return (
    <g className={className} data-organ="constitutional">
      {/* Invisible outline for interaction  */}
      <use
        href="#hpo-body-image"
        fill="none"
        stroke="transparent"
        strokeWidth={Math.max(style?.strokeWidth || DEFAULT_STROKE_WIDTH, 8)}
      />
      {/* Skin path */}
      <use
        href="#hpo-body-image"
        fill={fill}
        stroke={stroke}
        strokeWidth={style?.strokeWidth || DEFAULT_STROKE_WIDTH}
      />
    </g>
  );
}