Pitch

                    import { Pitch } from "@withqwerty/campos-stadia";
import type { PitchColors } from "@withqwerty/campos-stadia";

type EventPoint = {
  id: string;
  x: number;
  y: number;
  value: number;
};

const pitchColors: PitchColors = {
  fill: "#17462a",
  lines: "#ffffffd9",
  markings: "#ffffff66",
};

export function AttackingHalfSurface({
  events,
  exportMode = false,
}: {
  events: readonly EventPoint[];
  exportMode?: boolean;
}) {
  return (
    <Pitch
      crop="half"
      attackingDirection="up"
      side="attack"
      frame="crop"
      colors={pitchColors}
      grass={{ type: "stripes", opacity: 0.35 }}
      markings={{ halfSpaces: true, thirds: true }}
      interactive={!exportMode}
      role="img"
      ariaLabel={`${events.length} attacking-half events`}
    >
      {({ project }) =>
        events.map((event) => {
          const point = project(event.x, event.y);
          return (
            <circle
              key={event.id}
              cx={point.x}
              cy={point.y}
              r={1.2 + event.value * 2}
              fill="#f6c945"
              stroke="#141414"
              strokeWidth={0.25}
            />
          );
        })
      }
    </Pitch>
  );
}