import React from "react";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import PYQTestReport from "./Tabs/PYQTestReport";
import MockTestReport from "./Tabs/MockTestReport";
import ReportsScoreTab from "./Tabs/ReportsScoreTab";
import PracticeTestReport from "./Tabs/PracticeTestReport";

const OverallStudentReports: React.FC = () => {
  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "Reports & Score",
      children: <ReportsScoreTab />,
    },
    {
      key: "2",
      label: "Practice Test Report",
      children: <PracticeTestReport />,
    },
    {
      key: "3",
      label: "Mock Test Report",
      children: <MockTestReport />,
    },
    {
      key: "4",
      label: "PYQ Test Report",
      children: <PYQTestReport />,
    }
  ];

  return (
    <div className="bg-white min-h-screen p-6 rounded-lg shadow-sm">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-800">Overall Tests Reports</h1>
        <p className="text-slate-500 mt-1 text-sm">View comprehensive reports and scores of students.</p>
      </div>

      <Tabs
        defaultActiveKey="1"
        items={items}
        className="custom-tabs"
        destroyInactiveTabPane={true}
      />
    </div>
  );
};

export default OverallStudentReports;