"use client";

import { FC, useEffect, useState } from "react";
import { useLeafcutterContext } from "./LeafcutterProvider";
import { RawDataViewer } from "./RawDataViewer";
import { searchVisualizationsAction } from "../actions/visualizations";

export const LiveDataViewer: FC = () => {
  const { query, setFoundCount, datasource } = useLeafcutterContext();
  const [rows, setRows] = useState<any[]>([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await searchVisualizationsAction(datasource, query);
      setRows(result);
      setFoundCount(result?.length ?? 0);
    };
    fetchData();
  }, [query, setFoundCount, datasource]);

  return <RawDataViewer rows={rows} height={350} />;
};