import { Loading } from '@/components/shared'
import Widget from './Widget'
import { WidgetsData } from '@/proxy/dashboard/models'

const Widgets = ({
  loading,
  widgetData,
}: {
  loading: boolean
  widgetData: WidgetsData[] | undefined
}) => {
  return (
    <Loading loading={loading}>
      <div className="grid grid-cols-1 lg:grid-cols-3 lg:gap-4 gap-3">
        {widgetData?.map((item, index) => {
          const formattedValue = new Intl.NumberFormat(undefined, {
            minimumFractionDigits: 1,
            maximumFractionDigits: 1,
          }).format(item.datavalue)

          return (
            <Widget
              key={index}
              datagrowShrink={item.datagrowShrink}
              datavalue={formattedValue}
              label={item.label}
              valuePrefix={item.valuePrefix}
              date={item.date}
            />
          )
        })}
      </div>
    </Loading>
  )
}

export default Widgets