---
/** Bullet/capsule shape — represents a TARGET STATE declared by a
   processing component (a file, a row, a vector). Flat on the left so
   an incoming arrow reads as "produced by", rounded on the right. */
import ShapeGroup from './ShapeGroup.astro';

interface Props {
  x: number;
  y: number;
  w?: number;
  h?: number;
  label: string;
  state?: 'idle' | 'new' | 'updated' | 'changed' | 'removed';
  highlight?: boolean;
  class?: string;
}
const {
  x, y,
  w = 86,
  h = 28,
  label,
  state = 'idle',
  highlight = false,
  class: extraClass = '',
} = Astro.props;
const r = h / 2;
// Bullet: flat left side, straight top/bottom, semi-circle on the right.
const d = `M 0 0 L ${w - r} 0 A ${r} ${r} 0 0 1 ${w - r} ${h} L 0 ${h} Z`;
---
<ShapeGroup
  x={x} y={y}
  baseClass="dg-bullet"
  state={state}
  highlight={highlight}
  class={extraClass}
>
  <path class="dg-box" d={d} />
  <foreignObject x="0" y="0" width={w - r} height={h}>
    <div xmlns="http://www.w3.org/1999/xhtml" class="dg-fo-label dg-fo-label--small dg-fo-label--mono">{label}</div>
  </foreignObject>
</ShapeGroup>
