import React from "react"
import { TrackingTripDetails } from "./trackingTripDetails"
import { TruckLocationTimeLine } from "./truckLocationTimeLine"
import { TrackingStatusDetails } from "./trackingStatusDetails"
import { TrackingUiType } from "../types/TrackingUi"

export const TrackingUi = (prop: TrackingUiType) => {
    const {  tripDetails, handleTrackButton } = prop
    return(
        <div  className="fr-grid">
                <div className="fr-bg-gray-100 fr-rounded-md fr-p-2">
                    <TrackingTripDetails {...tripDetails}/>
                    <TrackingStatusDetails  handleTrackButton={handleTrackButton} tripDetails={tripDetails}/>
                    <TruckLocationTimeLine {...tripDetails}/>
                </div>
        </div>
    )
}