const featureIcons = {
  "Air Conditioner": (
    <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2v10" /><path d="m4.93 10.93 1.41 1.41" /><path d="M2 18h2" /><path d="M20 18h2" /><path d="m19.07 10.93-1.41 1.41" /><path d="M22 22H2" /><path d="m8 6 4-4 4 4" /><path d="M16 18a4 4 0 0 0-8 0" />
    </svg>
  ),
  "Audio System": (
    <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
    </svg>
  ),
  "Spacious Leg Space": (
    <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" /><path d="M3 16h18" /><path d="M3 11h2a2 2 0 0 1 2 2v3" /><path d="M17 11h2a2 2 0 0 1 2 2v3" />
    </svg>
  ),
};

const VehicleBadges = ({ features }) => {
  return (
    <div className="flex flex-wrap gap-2 px-5 pb-3">
      {features.map((feature) => (
        <span
          key={feature}
          className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-badge-bg text-badge-text text-xs font-medium rounded-md"
        >
          {featureIcons[feature] || null}
          {feature}
        </span>
      ))}
    </div>
  );
};

export default VehicleBadges;
