import { Divider, Steps } from "antd";
import React, { useState } from "react";
import { useTabsState } from "../../../../zustand/TabsState";
import { useModalTabsState } from "../../../../zustand/ModalTabsState";
import Form from "./Form";
import TabsBar from "../../../../Components/Layout/Tabs/TabsBar";
import ActiveTabs from "../../../../Components/Layout/Tabs/ActiveTabs";

const ModelBody = () => {
  const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
  function handelTabClick(index: number) {
    setActiveTab(index);
  }

  const steps = [
    {
      title: "الخطوة 1",
      description: "التفاصيل الشخصية",
      component: <Form />,
    },
    {
      title: "الخطوة 2",
      description: "التفاصيل الشخصية",
      component: <>H2</>,
    },
    {
      title: "الخطوة 3",
      description: "التفاصيل الشخصية",
      component: <>H2</>,
    },
    {
      title: "الخطوة 4",
      description: "التفاصيل الشخصية",
      component: <>H2</>,
    },
    {
      title: "الخطوة 5",
      description: "التفاصيل الشخصية",
      component: <>H2</>,
    },
    {
      title: "الخطوة 5",
      description: "التفاصيل الشخصية",
      component: <>H2</>,
      hidden: true,
    },
  ];

  return (
    <div className="ModelBody">
      <TabsBar steps={steps} />
      <div className="ModelBodyForm">
        <header>إضافة طالب</header>
        <ActiveTabs steps={steps} />
      </div>
    </div>
  );
};

export default ModelBody;