import { FC } from "react"
import { StatusBoxItemInterface } from "../../types"
import { StatusBoxItem } from "../common/status-box-items"
import { WalletStatusSkeleton } from "./wallet-skeleton"

type Props = {
    statusData: StatusBoxItemInterface[] | []
    isLoading: boolean
}

export const StatusBoxWallet: FC<Props> = ({ statusData,
    isLoading }) => {
    if (isLoading) return <WalletStatusSkeleton />
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} detail={item?.detail} />)}
        </div>
    )
}