import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import CreateTeacher from '../CreateTeacher';
import UpdatePassword from './components/UpdatePassword';
import { useParams } from 'react-router-dom';
import useTitle from '@/hooks/useTitle';

const EditTeacher = () => {
  useTitle('Edit Teacher');
  const { teacherId } = useParams();
  if (!teacherId)
    return (
      <div className="flex items-center justify-center h-[50%]">
        <h3>Not Found</h3>
      </div>
    );

  return (
    <section>
      <span className="flex items-center justify-center py-2 text-slate-700 text-[26px] font-semibold">
        Edit Account
      </span>

      <Tabs defaultValue="update_info" className="flex flex-col items-center ">
        <TabsList className="flex justify-center w-fit">
          <TabsTrigger value="update_info" className="font-semibold">
            Update-Info
          </TabsTrigger>
          <TabsTrigger value="update_password" className="font-semibold">
            Update-Password
          </TabsTrigger>
        </TabsList>
        <TabsContent value="update_info" className="w-full">
          <CreateTeacher isEdit teacherId={teacherId} />
        </TabsContent>
        <TabsContent value="update_password" className="w-full">
          <UpdatePassword teacherId={teacherId} />
        </TabsContent>
      </Tabs>
    </section>
  );
};

export default EditTeacher;