// Example TypeScript file
import { useState, useEffect } from 'react';

interface ScorecardData {
  holes: Hole[];
  project: Project;
}

export function ScorecardComponent({ data }: { data: ScorecardData }) {
  const [selectedHole, setSelectedHole] = useState<number | null>(null);
  
  useEffect(() => {
    // Track hole selection
    console.log('Selected hole:', selectedHole);
  }, [selectedHole]);

  return (
    <div className="scorecard-container">
      {data.holes.map(hole => (
        <HoleView
          key={hole.number}
          hole={hole}
          isSelected={hole.number === selectedHole}
          onSelect={() => setSelectedHole(hole.number)}
        />
      ))}
    </div>
  );
}