import React, { FC } from 'react';
import { range } from 'lodash';
import { LoaderWrapper } from '@orchard/frontend-react-components';
import Metric from 'src/components/metric';
import { SKIPS } from 'src/constants/graphs';

export interface Props {
    potMetric: string;
    loading: boolean;
    count: number;
    values: (number | null)[];
}

export const CLASSNAME = 'MetricsHero';
export const METRIC_TEST_ID = (i: number) => `${CLASSNAME}-${i}`;

const MetricsHero: FC<Props> = ({ potMetric, loading, count, values }) => (
    <div className={CLASSNAME}>
        {
            loading
                ? <LoaderWrapper numberOfItems={count} />
                : range(count).map(i => (
                    <Metric
                        key={i}
                        value={values[i]}
                        size="lg"
                        testId={METRIC_TEST_ID(i)}
                        className={`color-dataviz-${i}`}
                        format={potMetric === SKIPS ? 'percentage' : 'number'}
                    />
                ))
        }
    </div>
);

export default MetricsHero;