// pages/rh/gestao_beneficios.tsx
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectItem } from "@/components/ui/select";

export default function GestaoBeneficios() {
  const [beneficio, setBeneficio] = useState({
    matricula: "",
    nome: "",
    tipo: "",
    valor: "",
    observacoes: "",
  });

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Gestão de Benefícios</h2>
      <Card>
        <CardContent className="grid gap-4 p-4">
          <div>
            <Label>Matrícula</Label>
            <Input value={beneficio.matricula} onChange={e => setBeneficio({ ...beneficio, matricula: e.target.value })} />
          </div>
          <div>
            <Label>Nome</Label>
            <Input value={beneficio.nome} onChange={e => setBeneficio({ ...beneficio, nome: e.target.value })} />
          </div>
          <div>
            <Label>Tipo de Benefício</Label>
            <Select onValueChange={(tipo) => setBeneficio({ ...beneficio, tipo })}>
              <SelectItem value="vale-transporte">Vale-Transporte</SelectItem>
              <SelectItem value="vale-alimentacao">Vale-Alimentação</SelectItem>
              <SelectItem value="plano-saude">Plano de Saúde</SelectItem>
              <SelectItem value="outros">Outros</SelectItem>
            </Select>
          </div>
          <div>
            <Label>Valor</Label>
            <Input value={beneficio.valor} onChange={e => setBeneficio({ ...beneficio, valor: e.target.value })} />
          </div>
          <div>
            <Label>Observações</Label>
            <Input value={beneficio.observacoes} onChange={e => setBeneficio({ ...beneficio, observacoes: e.target.value })} />
          </div>
          <Button>Salvar</Button>
        </CardContent>
      </Card>
    </div>
  );
}
