import React from 'react';

interface CompareIconProps {
  className?: string;
  width?: number;
  height?: number;
}

export const CompareIcon: React.FC<CompareIconProps> = ({ 
  className = "", 
  width = 24, 
  height = 24 
}) => {
  return (
    <svg 
      width={width} 
      height={height} 
      viewBox="0 0 24 24" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path d="M12 1C13.3059 1 14.4141 1.83532 14.8262 3H18.5C19.0523 3 19.5 3.44772 19.5 4C19.5 4.55228 19.0523 5 18.5 5H14.8262C14.5249 5.85152 13.8515 6.5238 13 6.8252V21H18.5C19.0523 21 19.5 21.4477 19.5 22C19.5 22.5523 19.0523 23 18.5 23H5.5C4.94772 23 4.5 22.5523 4.5 22C4.5 21.4477 4.94772 21 5.5 21H11V6.8252C10.1485 6.5238 9.47513 5.85152 9.17383 5H5.5C4.94772 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94772 3 5.5 3H9.17383C9.58594 1.83532 10.6941 1 12 1ZM12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3Z" fill="currentColor"/>
      <path d="M3.67383 7.56812C4.229 6.50318 5.771 6.50317 6.32617 7.56812L6.37891 7.67847L8.91895 13.6062C8.97225 13.7306 8.99997 13.8644 9 13.9998C9 15.7352 7.69135 17.9998 5 17.9998C2.30865 17.9998 1 15.7352 1 13.9998C1.00003 13.8644 1.02775 13.7306 1.08105 13.6062L3.62109 7.67847L3.67383 7.56812ZM17.6738 7.56812C18.229 6.50317 19.771 6.50317 20.3262 7.56812L20.3789 7.67847L22.9189 13.6062C22.9723 13.7306 23 13.8644 23 13.9998C23 15.7352 21.6914 17.9998 19 17.9998C16.3086 17.9998 15 15.7352 15 13.9998C15 13.8644 15.0277 13.7306 15.0811 13.6062L17.6211 7.67847L17.6738 7.56812ZM3.00879 14.1833C3.09268 15.0659 3.77658 15.9998 5 15.9998C6.22338 15.9998 6.9063 15.0659 6.99023 14.1833L5 9.53882L3.00879 14.1833ZM17.0088 14.1833C17.0927 15.0659 17.7766 15.9998 19 15.9998C20.2234 15.9998 20.9063 15.0659 20.9902 14.1833L19 9.53882L17.0088 14.1833Z" fill="currentColor"/>
    </svg>
  );
};