import React from 'react';
import { Pencil, Trash, Plus } from 'lucide-react';

const AdminDashboard = () => {
  // Dados de exemplo (depois virão do backend)
  const cars = [
    {
      id: 1,
      name: 'BMW M4 2024',
      price: 75000,
      image: '/api/placeholder/200/150',
      isSpecial: true
    },
    {
      id: 2,
      name: 'Mercedes-Benz C-Class 2015',
      price: 35000,
      image: '/api/placeholder/200/150',
      isSpecial: true
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
          <div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
            <span className="text-gray-500">LOGO</span>
          </div>
          <span className="font-semibold text-gray-700">Admin Panel</span>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-8">
        {/* Add New Car Button */}
        <div className="mb-8">
          <button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
            <Plus className="w-5 h-5" />
            Add New Car
          </button>
        </div>

        {/* Cars List */}
        <div className="bg-white rounded-lg shadow">
          <div className="py-4 px-6 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-800">Cars Management</h2>
          </div>
          
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Image</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Special</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {cars.map((car) => (
                  <tr key={car.id}>
                    <td className="px-6 py-4">
                      <img 
                        src={car.image} 
                        alt={car.name}
                        className="w-24 h-16 object-cover rounded"
                      />
                    </td>
                    <td className="px-6 py-4">{car.name}</td>
                    <td className="px-6 py-4">${car.price.toLocaleString()}</td>
                    <td className="px-6 py-4">
                      {car.isSpecial ? (
                        <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
                          Special
                        </span>
                      ) : '-'}
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex gap-2">
                        <button className="p-2 text-blue-600 hover:bg-blue-50 rounded">
                          <Pencil className="w-5 h-5" />
                        </button>
                        <button className="p-2 text-red-600 hover:bg-red-50 rounded">
                          <Trash className="w-5 h-5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </main>
    </div>
  );
};

export default AdminDashboard;