import { Polyline, CircleMarker, Tooltip } from 'react-leaflet';
import type { WalkingRoute } from '@/types/canvass';

interface WalkingRouteLineProps {
  route: WalkingRoute;
}

export default function WalkingRouteLine({ route }: WalkingRouteLineProps) {
  if (route.orderedLocations.length === 0) return null;

  const positions = route.orderedLocations.map(
    (loc) => [loc.latitude, loc.longitude] as [number, number],
  );

  return (
    <>
      <Polyline
        positions={positions}
        pathOptions={{
          color: '#3498db',
          weight: 3,
          dashArray: '8, 6',
          opacity: 0.7,
        }}
      />
      {route.orderedLocations.map((loc, idx) => (
        <CircleMarker
          key={`route-${loc.id}`}
          center={[loc.latitude, loc.longitude]}
          radius={4}
          pathOptions={{
            color: '#3498db',
            fillColor: '#fff',
            fillOpacity: 1,
            weight: 2,
          }}
        >
          <Tooltip direction="top" offset={[0, -6]} permanent={false}>
            Stop #{idx + 1}
          </Tooltip>
        </CircleMarker>
      ))}
    </>
  );
}
