// pages/rh/ponto_digital.tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useEffect, useState } from "react";

export default function PontoDigital() {
  const [hora, setHora] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setHora(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const registrarPonto = () => {
    alert("Ponto registrado com sucesso em " + hora.toLocaleString());
  };

  return (
    <div className="p-6 text-center">
      <h1 className="text-xl font-bold mb-4">Ponto Digital</h1>
      <Card className="inline-block">
        <CardContent className="p-6">
          <div className="text-4xl font-mono mb-4">{hora.toLocaleTimeString()}</div>
          <Button onClick={registrarPonto}>Registrar Ponto</Button>
        </CardContent>
      </Card>
    </div>
  );
}
