import { AvatarUpload } from "@/components/ui/avatar-upload";
import { DatePicker } from "@/components/ui/date-picker";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";

export function StudentSettingsPage() {
  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">
        Configurações do Perfil
      </h1>

      {/* Seções em Tabs */}
      <Tabs defaultValue="personal">
        <TabsList>
          <TabsTrigger value="personal">Informações Pessoais</TabsTrigger>
          <TabsTrigger value="preferences">Preferências</TabsTrigger>
          <TabsTrigger value="accessibility">Acessibilidade</TabsTrigger>
          <TabsTrigger value="notifications">Notificações</TabsTrigger>
        </TabsList>

        <TabsContent value="personal">
          <div className="space-y-6">
            {/* Avatar Upload */}
            <div className="flex items-center gap-4">
              <AvatarUpload />
              <div>
                <h3 className="font-medium">Foto do Perfil</h3>
                <p className="text-sm text-gray-500">
                  JPG ou PNG, máximo 2MB
                </p>
              </div>
            </div>

            {/* Informações Básicas */}
            <div className="grid grid-cols-2 gap-4">
              <Input 
                label="Nome Completo"
                name="fullName"
                placeholder="Seu nome completo"
              />
              <Input 
                label="Nome Social/Apelido"
                name="nickname"
                placeholder="Como prefere ser chamado"
              />
              <DatePicker 
                label="Data de Nascimento"
                name="birthDate"
              />
              <Select
                label="Gênero"
                name="gender"
                options={[
                  { value: 'male', label: 'Masculino' },
                  { value: 'female', label: 'Feminino' },
                  { value: 'non_binary', label: 'Não-binário' },
                  { value: 'other', label: 'Outro' },
                  { value: 'prefer_not_to_say', label: 'Prefiro não dizer' }
                ]}
              />
            </div>
          </div>
        </TabsContent>

        {/* Outras tabs... */}
      </Tabs>
    </div>
  );
}