import { Group, Rect, Circle } from 'react-konva';

interface TableSilhouetteProps {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly depth: number;
  readonly rotation: number;
  readonly color: string;
  readonly fillColor: string;
}

/** Top-down dining table silhouette: rectangle with rounded corners + leg dots. */
export function TableSilhouette({ x, y, width, depth, rotation, color, fillColor }: TableSilhouetteProps) {
  const halfW = width / 2;
  const halfD = depth / 2;
  const legInset = Math.min(width, depth) * 0.1;
  const legR = Math.min(width, depth) * 0.03;

  return (
    <Group x={x} y={y} rotation={rotation}>
      <Rect
        x={-halfW}
        y={-halfD}
        width={width}
        height={depth}
        stroke={color}
        strokeWidth={1.5}
        fill={fillColor}
        cornerRadius={Math.min(width, depth) * 0.05}
        listening={false}
      />
      {/* Four leg dots */}
      <Circle x={-halfW + legInset} y={-halfD + legInset} radius={legR} fill={color} listening={false} />
      <Circle x={halfW - legInset} y={-halfD + legInset} radius={legR} fill={color} listening={false} />
      <Circle x={-halfW + legInset} y={halfD - legInset} radius={legR} fill={color} listening={false} />
      <Circle x={halfW - legInset} y={halfD - legInset} radius={legR} fill={color} listening={false} />
    </Group>
  );
}
