// src/pages/cadastro_cacamba.tsx

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

export default function CadastroCacambaPage() {
  const [formData, setFormData] = useState({
    identificacao: '',
    capacidade: '',
    status: 'disponivel',
    observacoes: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Dados da Caçamba:', formData);
    // Aqui futuramente enviamos para a API
  };

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Cadastro de Caçamba</h1>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div>
          <Label htmlFor="identificacao">Identificação da Caçamba</Label>
          <Input
            id="identificacao"
            name="identificacao"
            value={formData.identificacao}
            onChange={handleChange}
            placeholder="Ex: CAC-001"
            required
          />
        </div>

        <div>
          <Label htmlFor="capacidade">Capacidade (m³)</Label>
          <Input
            id="capacidade"
            name="capacidade"
            value={formData.capacidade}
            onChange={handleChange}
            type="number"
            placeholder="Ex: 6"
            required
          />
        </div>

        <div>
          <Label htmlFor="status">Status</Label>
          <select
            id="status"
            name="status"
            value={formData.status}
            onChange={handleChange}
            className="w-full border rounded px-3 py-2"
          >
            <option value="disponivel">Disponível</option>
            <option value="em uso">Em Uso</option>
            <option value="manutencao">Manutenção</option>
            <option value="inativo">Inativo</option>
          </select>
        </div>

        <div>
          <Label htmlFor="observacoes">Observações</Label>
          <Textarea
            id="observacoes"
            name="observacoes"
            value={formData.observacoes}
            onChange={handleChange}
            placeholder="Anotações gerais sobre a caçamba"
          />
        </div>

        <Button type="submit" variant="default" className="w-full">
          Salvar Caçamba
        </Button>
      </form>
    </div>
  );
}
