const VehicleInfo = ({ name, seats }) => {
  return (
    <div className="px-5 pt-4 pb-2">
      <h3 className="text-lg font-semibold text-dark-900 leading-tight">
        {name}
      </h3>
      <div className="flex items-center gap-1.5 mt-1.5 text-badge-text text-sm">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="w-4 h-4"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
        <span>{seats} seats</span>
      </div>
    </div>
  );
};

export default VehicleInfo;
