<div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">
          <span className="text-gray-800">Species</span>
        </h2>
      </div>

interface Dataset {
  id: string;
  name: string;
}

// Removing unused interface
// interface Dataset {
//   id: string;
//   name: string;
// }

interface DatasetsResponse {
  data: Dataset[];
}

// Removing unused interface
// interface DatasetsResponse {
//   data: Dataset[];
// }

const Locations: React.FC<LocationsProps> = ({ datasetId, onLocationSelect, hideDatasetName = false }) => {

const Locations: React.FC<LocationsProps> = ({ datasetId, onLocationSelect /* hideDatasetName = false */ }) => {

  const [datasetName, setDatasetName] = useState<string>("");

  // const [datasetName, setDatasetName] = useState<string>("");

    setDatasetName("");

    // setDatasetName("");

        // First fetch the dataset name
        try {
          const datasetResponse = await fetch(`/api/datasets`, {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          });

          if (datasetResponse.ok) {
            const datasetData = await datasetResponse.json() as DatasetsResponse;
            const dataset = datasetData.data.find(d => d.id === datasetId);
            if (dataset) {
              setDatasetName(dataset.name);
            }
          }
        } catch {
          // If unable to get the dataset name, use a generic display
          setDatasetName(`Dataset ${datasetId.substring(0, 6)}...`);
        }

        // Dataset name fetch removed - no longer needed

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">
          <span className="text-gray-800">Locations</span>
        </h2>
        {!hideDatasetName && datasetName && (
          <div className="text-gray-600 text-sm flex items-center">
            {datasetName}
          </div>
        )}
      </div>