import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const patrimonioDemo = [
  {
    id: "1",
    tipo: "Caminhão",
    nome: "Mercedes Axor 2041",
    valor: "250.000,00",
    seguro: "Sim",
    imagem: "/assets/img/caminhao-1.png",
  },
  {
    id: "2",
    tipo: "Pá Carregadeira",
    nome: "Volvo L60H",
    valor: "420.000,00",
    seguro: "Não",
    imagem: "/assets/img/cacamba-1.png",
  },
];

export default function ListagemPatrimonio() {
  const [filtro, setFiltro] = useState("");

  const patrimonioFiltrado = patrimonioDemo.filter((p) =>
    p.tipo.toLowerCase().includes(filtro.toLowerCase())
  );

  return (
    <div className="p-6 max-w-6xl mx-auto">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold text-primary">Patrimônios Cadastrados</h1>
        <Input
          type="text"
          placeholder="Filtrar por tipo..."
          className="max-w-xs"
          value={filtro}
          onChange={(e) => setFiltro(e.target.value)}
        />
      </div>

      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        {patrimonioFiltrado.map((patrimonio) => (
          <Card key={patrimonio.id} className="rounded-2xl shadow-md">
            <img
              src={patrimonio.imagem}
              alt={patrimonio.nome}
              className="w-full h-48 object-cover rounded-t-2xl"
            />
            <CardContent className="p-4">
              <h2 className="text-lg font-semibold">{patrimonio.nome}</h2>
              <p className="text-sm text-gray-600 mb-2">{patrimonio.tipo}</p>
              <p className="text-sm mb-2">Valor: R$ {patrimonio.valor}</p>
              <p className="text-sm">Seguro: {patrimonio.seguro}</p>

              <div className="flex gap-2 mt-4">
                <Button variant="secondary" className="w-full">Ver</Button>
                <Button variant="outline" className="w-full">Editar</Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
