import React, { useState } from "react";
import Files from "./Files";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { NightFilter } from "../types";
interface ClusterProps {
  clusterId: string;
  clusterName: string;
  locationId: string;
  datasetId: string | null;
  hideHeaderInfo?: boolean;
  nightFilter?: NightFilter;
}
const Cluster: React.FC<ClusterProps> = ({ 
  clusterId, 
  clusterName,
  locationId,
  datasetId,
  hideHeaderInfo = false,
  nightFilter
}) => {
  const [currentTab, setCurrentTab] = useState<string>("cluster");
  return (
    <div className="space-y-4">
      <Tabs 
        defaultValue="cluster" 
        value={currentTab}
        onValueChange={setCurrentTab}
        className="w-full"
      >
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="cluster">Files</TabsTrigger>
          <TabsTrigger value="statistics">Statistics</TabsTrigger>
        </TabsList>
        
        <TabsContent value="cluster" className="mt-4">
          <Files 
            clusterId={clusterId}
            clusterName={clusterName}
            datasetId={datasetId}
            hideHeaderInfo={hideHeaderInfo}
            {...(nightFilter && { nightFilter })}
          />
        </TabsContent>
        
        <TabsContent value="statistics" className="mt-4">
          <div className="card p-6 bg-white shadow-sm rounded-lg">
            <p>Statistics for {clusterId} in {locationId} of {datasetId}</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};
export default Cluster;

import Files from "./Files";

import Cluster from "./Cluster";

              {/* Main Files component */}
              <Files 

              {/* Main Cluster component */}
              <Cluster 

                locationId={selectedLocationId!}