// src/pages/listagem_cacambas.tsx

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import Image from 'next/image';

export default function ListagemCacambasPage() {
  const [visualizacao, setVisualizacao] = useState<'cards' | 'tabela'>('cards');

  const cacambas = [
    {
      id: 'CAC-001',
      capacidade: 6,
      status: 'Disponível',
      localizacao: 'Rua das Palmeiras, 123',
      imagem: '/assets/img/cacamba-1.png',
    },
    {
      id: 'CAC-002',
      capacidade: 6,
      status: 'Em Uso',
      localizacao: 'Avenida Brasil, 456',
      imagem: '/assets/img/cacamba-1.png',
    },
    // Adicione mais registros fictícios se quiser
  ];

  return (
    <div className="p-8">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold">Lista de Caçambas</h1>
        <Button variant="default" onClick={() => setVisualizacao(visualizacao === 'cards' ? 'tabela' : 'cards')}>
          {visualizacao === 'cards' ? 'Ver em Tabela' : 'Ver em Cards'}
        </Button>
      </div>

      {visualizacao === 'cards' ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {cacambas.map((cacamba) => (
            <Card key={cacamba.id} className="shadow-lg rounded-2xl">
              <CardContent className="p-4 space-y-3">
                <Image 
                  src={cacamba.imagem}
                  alt="Foto da Caçamba"
                  width={400}
                  height={200}
                  className="rounded-lg object-cover"
                />
                <div className="text-lg font-bold">{cacamba.id}</div>
                <div>Capacidade: {cacamba.capacidade} m³</div>
                <div>Status: {cacamba.status}</div>
                <div>Localização: {cacamba.localizacao}</div>
                <Button variant="secondary" className="mt-4 w-full">Ver Detalhes</Button>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Identificação</TableHead>
                <TableHead>Capacidade</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Localização</TableHead>
                <TableHead>Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {cacambas.map((cacamba) => (
                <TableRow key={cacamba.id}>
                  <TableCell>{cacamba.id}</TableCell>
                  <TableCell>{cacamba.capacidade} m³</TableCell>
                  <TableCell>{cacamba.status}</TableCell>
                  <TableCell>{cacamba.localizacao}</TableCell>
                  <TableCell>
                    <Button variant="secondary" size="sm">Ver Detalhes</Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
}
