import React from 'react';

const Logo = ({ className = "", lightText = false }) => {
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <div className="bg-primary-600 text-white rounded-lg p-1.5 flex items-center justify-center shadow-sm">
        {/* Car Icon SVG */}
        <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2" />
          <circle cx="7" cy="17" r="2" />
          <path d="M9 17h6" />
          <circle cx="17" cy="17" r="2" />
        </svg>
      </div>
      <span className={`text-xl sm:text-2xl font-extrabold tracking-tight ${lightText ? 'text-white' : 'text-dark-900'}`}>
        road.<span className="text-primary-600">rentals</span>
      </span>
    </div>
  );
};

export default Logo;
