'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@repo/shadcn/tabs';
import { useSurveysStatsQuery } from '../hooks/use-query-statistics';
import { SurveyOverview } from './survey-overview';
import { SurveyResponses } from './survey-responses';
import { SurveyDetails } from './survey-details';

export function SurveyStatistics() {
  const { data, isLoading } = useSurveysStatsQuery();

  if (isLoading) {
    return <div className="flex justify-center p-8">Cargando estadísticas...</div>;
  }

  return (
    <Tabs defaultValue="overview" className="w-full">
      <TabsList className="grid w-full grid-cols-3">
        <TabsTrigger value="overview">Resumen General</TabsTrigger>
        <TabsTrigger value="responses">Respuestas</TabsTrigger>
        <TabsTrigger value="details">Detalles por Encuesta</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <SurveyOverview data={data} />
      </TabsContent>
      <TabsContent value="responses">
        <SurveyResponses data={data} />
      </TabsContent>
      <TabsContent value="details">
        <SurveyDetails data={data} />
      </TabsContent>
    </Tabs>
  );
}