import { Loading } from "@/components/shared"
import Widget from "./Widget"
import { WidgetsData } from "./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