import { LocateIcon, MapPin } from "lucide-react";

interface Location {
    address: string;
    city: string;
}

interface Props {
    origin: Location;
    destination: Location;
}

export default function ListRoute({ origin, destination }: Props) {
    return (
        <div className="list-route">
            <div className="list-route-wrapper">
                <div className="flex-shrink-0">
                    <div className="list-route-icon">
                        <LocateIcon size={14} />
                    </div>
                </div>
                <div className="flex-grow-1 lh-1 text-truncate">
                    <small className="text-truncate text-secondary" style={{ fontSize: '0.7rem' }}>{origin.address}</small>
                    <div className="fw-medium text-truncate" style={{ fontSize: '0.9rem' }}>{origin.city}</div>
                </div>
            </div>
            <div className="list-route-wrapper">
                <div className="flex-shrink-0">
                    <div className="list-route-icon">
                        <MapPin size={14} />
                    </div>
                </div>
                <div className="flex-grow-1 lh-1 text-truncate">
                    <small className="text-truncate text-secondary" style={{ fontSize: '0.7rem' }}>{destination.address}</small>
                    <div className="fw-medium text-truncate" style={{ fontSize: '0.9rem' }}>{destination.city}</div>
                </div>
            </div>
        </div>
    )
}