import React from 'react';

interface VehicleAttribute {
  key: string;
  name: string;
  value: string;
}

interface VehicleAttributesTooltipProps {
  show: boolean;
  position: { x: number; y: number };
  vehicleName?: string;
  vehicleAttributes: VehicleAttribute[];
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
  imageUrl?: string; // опционально, для будущего
}

const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
  show,
  position,
  vehicleAttributes,
  onMouseEnter,
  onMouseLeave,
  imageUrl,
}) => {
  if (!show) return null;
  return (
    <div
      className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
      style={{
        left: `${position.x + 120}px`,
        top: `${position.y}px`,
      }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {/* Фоновое изображение, если будет нужно */}
      {imageUrl && (
        <img
          loading="lazy"
          src={imageUrl}
          className="object-cover absolute inset-0 size-full rounded-2xl opacity-10 pointer-events-none"
          alt="vehicle background"
        />
      )}
      <div className="flex relative flex-col w-full">
        {vehicleAttributes.map((attr, idx) => (
          <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
            <div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
              {attr.name}
            </div>
            <div className="self-stretch my-auto font-medium text-black truncate">
              {attr.value}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default VehicleAttributesTooltip;