import { useMemo } from 'react';

import _ from 'lodash';

import { VizCardType } from '@/api/types';

const VizCardItem = ({ item }: { item: VizCardType }) => {

    const _value = useMemo(() => {
        let _val = item.value;

        if (_.isNumber(_val)) {
            return (+_val).toLocaleString();
        }

        return _val;

    }, [item]);

    return (
        <div className="flex flex-col items-center justify-center rounded-lg bg-gradient-to-br from-muted/30 via-muted/10 to-transparent px-4 py-6 ring-1 ring-border/50">
            <div className="mx-auto mb-3 h-0.5 w-12 rounded-full bg-primary/40" />
            <div className="text-4xl font-semibold tabular-nums tracking-tight text-foreground">{_value}</div>
        </div>
    )
}

export default VizCardItem;
