import React from 'react'
import util from '../../lib/util'
import { TruckRatesTranslatedWords } from './type'

interface Props {
    priceRange?: { ton?: number, rounded_avg_rate?: number }
    loading?: boolean
    showRatePerTon?: boolean
    translatedWords?: TruckRatesTranslatedWords
}

const PriceRange = (props: Props) => {
    const { priceRange, loading, showRatePerTon, translatedWords } = props
    const { ton: tonLabel = 'Ton', average = 'Average', ratePerTon = 'Rate per ton' } = translatedWords || {}

    const ton = priceRange?.ton || 0
    const rounded_avg_rate= priceRange?.rounded_avg_rate || 0
    const labelStyle = "fr-m-0 fr-text-slate-500 "
    const valueStyle = "fr-text-slate-800 fr-font-bold"

    if (loading) {
        return <div className='fr-flex fr-justify-center fr-items-center fr-py-2 fr-border-b fr-border-slate-200'><span className="fr-loader"></span></div>
    }

    return (
        (!ton) ? null :
            <div className='fr-flex fr-py-2 fr-border-b fr-border-slate-200'>
                <div className='fr-flex-1 fr-text-center'>
                    <p className={labelStyle}>{tonLabel}: <span className={valueStyle}>{ton ? ton : ''}</span></p>
                </div>
                <div className='fr-flex-1 fr-text-center fr-border-l fr-border-slate-200 fr-pl-2'>
                    <p className={labelStyle}>{average}: <span className={valueStyle}>₹{rounded_avg_rate || ''}</span></p>
                </div>
                {showRatePerTon && <div className='fr-flex-1 fr-text-center fr-border-l fr-border-slate-200 fr-pl-2'>
                    <p className={labelStyle}>{ratePerTon}: <span className={valueStyle}>₹{util.roundedBy50(rounded_avg_rate/ton) || ''}</span></p>
                </div>}
            </div>
    )
}

export default PriceRange