import VehicleImage from "./VehicleImage";
import VehicleInfo from "./VehicleInfo";
import VehicleBadges from "./VehicleBadges";
import ViewDetailsBtn from "./ViewDetailsBtn";

const VehicleCard = ({ vehicle }) => {
  return (
    <article className="group bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 ease-out overflow-hidden">
      <VehicleImage src={vehicle.image} alt={vehicle.name} />
      <VehicleInfo name={vehicle.name} seats={vehicle.seats} />
      <VehicleBadges features={vehicle.features} />
      <ViewDetailsBtn price={vehicle.price} detailUrl={vehicle.detailUrl} />
    </article>
  );
};

export default VehicleCard;
