import { Button } from "@/components/ui/button";

const patrimonio = {
  id: "1",
  tipo: "Caminhão",
  nome: "Mercedes Axor 2041",
  valor_pago: "R$ 250.000,00",
  valor_parcela: "R$ 5.200,00",
  possui_seguro: "Sim",
  seguradora: "Porto Seguro",
  imagem: "/assets/img/caminhao-1.png",
  observacoes: "Caminhão utilizado em rotas urbanas. Revisado recentemente.",
};

export default function VisualizacaoPatrimonio() {
  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold text-primary mb-6">Detalhes do Patrimônio</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-4 rounded-2xl shadow-md">
        <div>
          <img
            src={patrimonio.imagem}
            alt={patrimonio.nome}
            className="w-full h-64 object-cover rounded-xl shadow"
          />
        </div>

        <div className="space-y-3">
          <div>
            <strong className="text-gray-700">Nome:</strong>
            <p className="text-lg">{patrimonio.nome}</p>
          </div>

          <div>
            <strong className="text-gray-700">Tipo:</strong>
            <p className="text-lg">{patrimonio.tipo}</p>
          </div>

          <div>
            <strong className="text-gray-700">Valor Pago:</strong>
            <p className="text-lg">{patrimonio.valor_pago}</p>
          </div>

          <div>
            <strong className="text-gray-700">Valor da Parcela Financiada:</strong>
            <p className="text-lg">{patrimonio.valor_parcela}</p>
          </div>

          <div>
            <strong className="text-gray-700">Possui Seguro?</strong>
            <p className="text-lg">{patrimonio.possui_seguro}</p>
          </div>

          <div>
            <strong className="text-gray-700">Seguradora:</strong>
            <p className="text-lg">{patrimonio.seguradora}</p>
          </div>

          <div>
            <strong className="text-gray-700">Observações:</strong>
            <p className="text-base">{patrimonio.observacoes}</p>
          </div>

          <div className="flex gap-4 pt-4">
            <Button variant="outline">Voltar</Button>
            <Button variant="default">Editar</Button>
          </div>
        </div>
      </div>
    </div>
  );
}
