import { FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetDetailService } from './hooks/useServiceData'
import HeaderBuy from './components/HeaderBuy'
import PageLoading from '../../components/PageLoading'

const BuyService: FC = () => {

    const { serviceId, planId } = useParams()
    const getDetailService = useGetDetailService(serviceId ? serviceId : '')

    return (
        <div className='w-full flex gap-6 mt-4'>
            {
                getDetailService.isPending ?
                    <PageLoading />
                    :
                    <div className='flex-1 max-w-full'>
                        <HeaderBuy planId={planId} data={getDetailService?.data?.data?.danakService} />
                    </div>
            }
        </div>
    )
}

export default BuyService