import { useState } from "react";
import VehicleCard from "./VehicleCard/VehicleCard";

const VehicleGrid = ({ vehicles }) => {
  const [showAll, setShowAll] = useState(false);
  const visibleVehicles = showAll ? vehicles : vehicles.slice(0, 6);
  if (vehicles.length === 0) {
    return (
      <div className="text-center py-16">
        <div className="text-6xl mb-4">🚗</div>
        <p className="text-lg text-badge-text font-medium">
          No vehicles found in this category.
        </p>
        <p className="text-sm text-gray-400 mt-1">
          Try selecting a different filter above.
        </p>
      </div>
    );
  }

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {visibleVehicles.map((vehicle, index) => (
          <div
            key={vehicle.id}
            className="opacity-0 animate-fadeInUp"
            style={{ animationDelay: `${index * 60}ms`, animationFillMode: "forwards" }}
          >
            <VehicleCard vehicle={vehicle} />
          </div>
        ))}
      </div>

      {vehicles.length > 6 && (
        <div className="flex justify-center mt-12">
          <button
            onClick={() => setShowAll(!showAll)}
            className="inline-flex items-center gap-2 px-8 py-3.5 border-2 border-primary-600 text-primary-600 font-bold text-sm rounded-xl hover:bg-primary-600 hover:text-white transition-all duration-300 shadow-sm"
          >
            {showAll ? "Show Less" : "Show More"}
            <svg 
              xmlns="http://www.w3.org/2000/svg" 
              className={`w-4 h-4 transition-transform duration-300 ${showAll ? "rotate-180" : ""}`}
              viewBox="0 0 24 24" 
              fill="none" 
              stroke="currentColor" 
              strokeWidth="2.5" 
              strokeLinecap="round" 
              strokeLinejoin="round"
            >
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </button>
        </div>
      )}
    </>
  );
};

export default VehicleGrid;
