import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import CreateSchool from '../components/CreateSchool';
import CreateInstDesigner from '../components/CreateInstDesigner';
import CreateTeacher from '../components/CreateTeacher';
import CreateAdmin from '../components/CreateAdmin';
import useUser from '@/hooks/useUser';

export default function CreateAccount() {
  const { user } = useUser();
  return (
    <section>
      <span className="flex items-center justify-center py-2 text-slate-700 text-[26px] font-semibold">Create Account</span>
      <Tabs defaultValue="school" className="flex flex-col items-center ">
        <TabsList className="flex justify-center w-fit">
          <TabsTrigger value="school" className="font-semibold">
            Schools
          </TabsTrigger>
          <TabsTrigger value="teacher" className="font-semibold">
            Teachers
          </TabsTrigger>
          <TabsTrigger value="inst_designer" className="font-semibold">
            Inst-Designer
          </TabsTrigger>
          {user?.role === 'super_admin' && (
            <TabsTrigger value="admin" className="font-semibold">
              Admin
            </TabsTrigger>
          )}
        </TabsList>
        <TabsContent value="school" className="w-full">
          <CreateSchool />
        </TabsContent>
        <TabsContent value="teacher" className="w-full">
          <CreateTeacher />
        </TabsContent>
        <TabsContent value="inst_designer" className="w-full">
          <CreateInstDesigner />
        </TabsContent>
        {user?.role === 'super_admin' && (
          <TabsContent value="admin" className="w-full">
            <CreateAdmin />
          </TabsContent>
        )}
      </Tabs>
    </section>
  );
}