// pages/rh/avaliacoes_desempenho.tsx
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/datepicker";

export default function AvaliacoesDesempenho() {
  const [dados, setDados] = useState({
    matricula: "",
    nome: "",
    data: "",
    avaliador: "",
    nota: "",
    observacoes: "",
  });

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Avaliações de Desempenho</h2>
      <Card>
        <CardContent className="grid gap-4 p-4">
          <div>
            <Label>Matrícula</Label>
            <Input value={dados.matricula} onChange={e => setDados({ ...dados, matricula: e.target.value })} />
          </div>
          <div>
            <Label>Nome</Label>
            <Input value={dados.nome} onChange={e => setDados({ ...dados, nome: e.target.value })} />
          </div>
          <div>
            <Label>Data da Avaliação</Label>
            <DatePicker
              selected={dados.data}
              onSelect={(date) => setDados({ ...dados, data: date })}
            />
          </div>
          <div>
            <Label>Avaliador</Label>
            <Input value={dados.avaliador} onChange={e => setDados({ ...dados, avaliador: e.target.value })} />
          </div>
          <div>
            <Label>Nota</Label>
            <Input value={dados.nota} onChange={e => setDados({ ...dados, nota: e.target.value })} />
          </div>
          <div>
            <Label>Observações</Label>
            <Textarea value={dados.observacoes} onChange={e => setDados({ ...dados, observacoes: e.target.value })} />
          </div>
          <Button>Salvar Avaliação</Button>
        </CardContent>
      </Card>
    </div>
  );
}
