// src/pages/visualizacao_cacamba.tsx

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import Image from 'next/image';

export default function VisualizacaoCacambaPage() {
  // Dados fictícios para exibição
  const cacamba = {
    identificacao: 'CAC-001',
    capacidade: 6,
    status: 'Disponível',
    localizacaoAtual: 'Obra - Rua das Palmeiras, 123',
    ultimaMovimentacao: '2025-04-25',
    observacoes: 'Caçamba recém pintada.',
    imagem: '/assets/img/cacamba-1.png',
  };

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold">Detalhes da Caçamba</h1>
        <Button variant="default">Editar</Button>
      </div>

      <Card className="shadow-lg rounded-2xl p-6">
        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-8">
          
          <div>
            <Image 
              src={cacamba.imagem}
              alt="Foto da Caçamba"
              width={500}
              height={300}
              className="rounded-xl object-cover border"
            />
          </div>

          <div className="space-y-4">
            <div>
              <h2 className="text-xl font-bold">Identificação</h2>
              <p>{cacamba.identificacao}</p>
            </div>

            <div>
              <h2 className="text-xl font-bold">Capacidade</h2>
              <p>{cacamba.capacidade} m³</p>
            </div>

            <div>
              <h2 className="text-xl font-bold">Status Atual</h2>
              <p>{cacamba.status}</p>
            </div>

            <div>
              <h2 className="text-xl font-bold">Localização Atual</h2>
              <p>{cacamba.localizacaoAtual}</p>
            </div>

            <div>
              <h2 className="text-xl font-bold">Última Movimentação</h2>
              <p>{cacamba.ultimaMovimentacao}</p>
            </div>

            <div>
              <h2 className="text-xl font-bold">Observações</h2>
              <p>{cacamba.observacoes}</p>
            </div>
          </div>

        </CardContent>
      </Card>
    </div>
  );
}
