<TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Name</TableHead>

                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Location</TableHead>

// Define a component for just the filter controls
export const FilesFilter: React.FC<{
  clusterId: string;
  onFilterChange: (filter: NightFilter) => void;
  currentFilter: NightFilter;
  totalFiles?: number;
}> = ({ 
  currentFilter, 
  onFilterChange, 
  totalFiles 
}) => {
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center">
        <select
          id="nightFilter"
          value={currentFilter}
          onChange={(e) => onFilterChange(e.target.value as NightFilter)}
          className="rounded-md border border-gray-300 bg-white py-1 px-3 text-sm shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
        >
          <option value="none">No filter</option>
          <option value="solarNight">Solar night</option>
          <option value="solarDay">Solar day</option>
          <option value="civilNight">Civil night</option>
          <option value="civilDay">Civil day</option>
        </select>
      </div>
      {totalFiles !== undefined && (
        <div className="text-gray-600 text-sm">
          {totalFiles} files
        </div>
      )}
    </div>
  );
};

  nightFilter?: NightFilter;

  hideHeaderInfo = false 

  hideHeaderInfo = false,
  nightFilter: externalNightFilter

  // Force usage of parameters by logging their values in development
  React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      console.log('Files component props:', { clusterId, clusterName, hideHeaderInfo });
    }
  }, [clusterId, clusterName, hideHeaderInfo]);

  const [nightFilter, setNightFilter] = useState<NightFilter>('none');

  const [nightFilter, setNightFilter] = useState<NightFilter>(externalNightFilter || 'none');

  const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const value = event.target.value as NightFilter;
    setNightFilter(value);
    setCurrentPage(1); // Reset to first page when changing filters
  };

  // Removed handleFilterChange function since we now use external filter

  // Update internal state when external filter changes
  useEffect(() => {
    if (externalNightFilter !== undefined) {
      setNightFilter(externalNightFilter);
    }
  }, [externalNightFilter]);

      {!hideHeaderInfo && (
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">
            <span className="text-gray-800">{clusterName}</span>
            <span className="ml-2">Files</span>
          </h2>
          <div className="flex items-center gap-4">
            <div className="flex items-center">
              <select
                id="nightFilter"
                value={nightFilter}
                onChange={handleFilterChange}
                className="rounded-md border border-gray-300 bg-white py-1 px-3 text-sm shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option value="none">No filter</option>
                <option value="solarNight">Solar night</option>
                <option value="solarDay">Solar day</option>
                <option value="civilNight">Civil night</option>
                <option value="civilDay">Civil day</option>
              </select>
            </div>
            {pagination && (
              <div className="text-gray-600 text-sm">
                {pagination.totalItems} files
              </div>
            )}
          </div>
        </div>
      )}
      {hideHeaderInfo && (
        <h2 className="text-xl font-bold mb-4">
          <span className="text-gray-800">{clusterName}</span>
          <span className="ml-2">Files</span>
        </h2>
      )}

      {/* Removed header section - now handled in AuthorisedContent */}

                  <TableHead className="w-[240px] py-3 font-bold text-sm uppercase">File Name</TableHead>

                  <TableHead className="w-[240px] py-3 font-bold text-sm uppercase">File</TableHead>

      <h2 className="text-xl font-bold mb-4">Datasets</h2>

                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Name</TableHead>

                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Dataset</TableHead>

  locationName, 
  datasetName = "", 
  hideDatasetName = false,

  // locationName, // eslint-disable-line @typescript-eslint/no-unused-vars
  // datasetName = "", // eslint-disable-line @typescript-eslint/no-unused-vars
  // hideDatasetName = false, // eslint-disable-line @typescript-eslint/no-unused-vars

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

                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Name</TableHead>

                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Cluster</TableHead>

import Files from "./Files";

import Files, { FilesFilter } from "./Files";

  const [filesFilter, setFilesFilter] = useState<"none" | "solarNight" | "solarDay" | "civilNight" | "civilDay">("none");

              <div className="flex justify-between items-center py-1">

              <div className="flex justify-between items-center py-1 mb-4">

                        Files

                        {selectedClusterName}

                
                {/* Filters moved to breadcrumb line */}
                {selectedClusterId && (
                  <FilesFilter 
                    clusterId={selectedClusterId}
                    currentFilter={filesFilter}
                    onFilterChange={(filter) => setFilesFilter(filter)}
                  />
                )}

              {/* Main Files component */}

                hideHeaderInfo={false}

                hideHeaderInfo={true}
                nightFilter={filesFilter}