"use client";

import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SiswaKeluarForm } from "./_components/siswa-keluar-form";
import { SiswaNaikKelasForm } from "./_components/siswa-naik-kelas-form";
import { SiswaBaru } from "./_components/siswa-baru";

export default function MutasiSiswaPage() {
  return (
    <div className="flex flex-1 flex-col gap-4 p-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Mutasi Siswa</h1>
          <p className="text-muted-foreground">Kelola mutasi siswa: keluar/tamat, naik kelas, dan siswa baru</p>
        </div>
      </div>

      <Tabs defaultValue="keluar" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="keluar">Keluar / Tamat</TabsTrigger>
          <TabsTrigger value="naik-kelas">Naik Kelas</TabsTrigger>
          <TabsTrigger value="siswa-baru">Siswa Baru</TabsTrigger>
        </TabsList>

        <TabsContent value="keluar" className="space-y-4">
          <SiswaKeluarForm />
        </TabsContent>

        <TabsContent value="naik-kelas" className="space-y-4">
          <SiswaNaikKelasForm />
        </TabsContent>

        <TabsContent value="siswa-baru" className="space-y-4">
          <SiswaBaru />
        </TabsContent>
      </Tabs>
    </div>
  );
}