import React from 'react';
import { useAppDispatch } from '@/states/store';
import { ReportHeader } from './components/ReportHeader';
import { ReportMain } from './components/ReportMain';
import { ReportFooter } from './components/ReportFooter';

const DiagnosticReport: React.FC = () => {
  const dispatch = useAppDispatch();
  const reportData = {}; // Define reportData here or fetch it from state or props

  React.useEffect(() => {
    // dispatch(resetReport());
  }, [dispatch]);

  return (
    <div className="flex flex-col h-full">
      <ReportHeader />
      <ReportMain className="flex-1 overflow-scroll" />
      <ReportFooter reportData={reportData} />
    </div>
  );
};

export default DiagnosticReport;
