import { ThailandFlag } from '@energyweb/origin-ui-assets' ; import { CardWithImageProps , IconTextProps , SpecFieldProps , } from '@energyweb/origin-ui-core' ; import { EnergyTypeEnum , PowerFormatter } from '@energyweb/origin-ui-utils' ; import { useTranslation } from 'react-i18next' ; import { TUseSpecsForAllDeviceCard } from './types' ; import { getMainFuelType , getEnergyTypeImage } from '../utils' ; import { getDeviceAgeInYears } from '../utils' ; export const useSpecsForAllDeviceCard = ( { device , allTypes , clickHandler , imageUrl , } ) => { const { t } = useTranslation ( ) ; const specsData = [ { label : t ( 'device.card.capacity' ) , value : PowerFormatter . format ( device . capacity ) , } , { label : t ( 'device.card.age' ) , value : getDeviceAgeInYears ( device . commissioningDate ) , } , ] ; const { mainType , restType } = getMainFuelType ( device . fuelType , allTypes ) ; const deviceIcon = getEnergyTypeImage ( mainType . toLowerCase ( ) as EnergyTypeEnum ) ; const iconsData = [ { icon : deviceIcon , title : mainType , subtitle : restType , } , { icon : ThailandFlag , title : `${ device . region }, ${ device . subregion }` , } , ] ; const detailViewLink = `/device/detail-view/${ device . id }` ; const cardProps = { heading : device . name , hoverText : t ( 'device.card.hoverText' ) . toUpperCase ( ) , imageUrl , fallbackIcon : deviceIcon , onActionClick : ( ) => clickHandler ( detailViewLink ) , } ; return { specsData , iconsData , cardProps } ; } ;