import React 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 { Download, Printer } from "lucide-react";

export default function Holerite() {
  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">Holerite</h1>

      <Card>
        <CardContent className="space-y-4 pt-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <Label htmlFor="funcionario">Funcionário</Label>
              <Input id="funcionario" placeholder="Nome do Funcionário" />
            </div>
            <div>
              <Label htmlFor="competencia">Competência</Label>
              <Input id="competencia" placeholder="MM/AAAA" />
            </div>
            <div className="flex items-end">
              <Button className="w-full">Buscar</Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="pt-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold">Resumo do Holerite</h2>
            <div className="space-x-2">
              <Button variant="outline">
                <Printer className="w-4 h-4 mr-2" /> Imprimir
              </Button>
              <Button variant="outline">
                <Download className="w-4 h-4 mr-2" /> Exportar PDF
              </Button>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div><strong>Salário Base:</strong> R$ 3.000,00</div>
            <div><strong>Horas Extras:</strong> R$ 250,00</div>
            <div><strong>Descontos:</strong> R$ 320,00</div>
            <div><strong>INSS:</strong> R$ 330,00</div>
            <div><strong>FGTS:</strong> R$ 240,00</div>
            <div><strong>Salário Líquido:</strong> R$ 2.930,00</div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
