import type { DriverLocation } from '@/types/gps';

interface GpsIndicatorDotProps {
  driverLocation: DriverLocation | undefined;
  onClick: (loc: DriverLocation) => void;
  className?: string;
}

const TEN_MINUTES = 10 * 60 * 1000;

export function GpsIndicatorDot({ driverLocation, onClick, className = '' }: GpsIndicatorDotProps) {
  // Don't render if driver has no GPS enrollment
  if (!driverLocation) return null;

  const isRecentlyActive = driverLocation.lastActive &&
    (Date.now() - new Date(driverLocation.lastActive).getTime()) < TEN_MINUTES;

  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        e.preventDefault();
        onClick(driverLocation);
      }}
      className={`inline-flex items-center justify-center p-0.5 rounded-full transition-all hover:scale-125 ${className}`}
      title={isRecentlyActive ? 'GPS active - click to view location' : 'GPS inactive - click for last known location'}
    >
      <span
        className={`block h-2.5 w-2.5 rounded-full ${
          isRecentlyActive
            ? 'bg-green-500 animate-pulse shadow-[0_0_6px_rgba(34,197,94,0.6)]'
            : 'bg-gray-400'
        }`}
      />
    </button>
  );
}
