import React, { 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';

export default function ConsultaPonto() {
  const [matricula, setMatricula] = useState('');
  const [dataInicio, setDataInicio] = useState('');
  const [dataFim, setDataFim] = useState('');

  const handleConsulta = () => {
    // Lógica de busca
    console.log({ matricula, dataInicio, dataFim });
  };

  return (
    <div className="p-4">
      <Card className="max-w-4xl mx-auto">
        <CardContent className="space-y-4">
          <h2 className="text-xl font-semibold">Consulta de Ponto</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <Label>Matrícula</Label>
              <Input
                type="text"
                value={matricula}
                onChange={(e) => setMatricula(e.target.value)}
              />
            </div>
            <div>
              <Label>Data Início</Label>
              <Input
                type="date"
                value={dataInicio}
                onChange={(e) => setDataInicio(e.target.value)}
              />
            </div>
            <div>
              <Label>Data Fim</Label>
              <Input
                type="date"
                value={dataFim}
                onChange={(e) => setDataFim(e.target.value)}
              />
            </div>
          </div>
          <Button onClick={handleConsulta}>Consultar</Button>
          <div className="mt-4">
            {/* Resultados da consulta renderizados aqui */}
            <p className="text-sm text-gray-500">Resultados aparecerão aqui após a consulta.</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
