import React, { Fragment } from 'react';
import { AnimatedBox, Box } from '../Box';
import type { IOpacity } from './skeleton';

interface IProps extends IOpacity {
  nItems?: number;
}

export const Group = ({ nItems = 2, opacity }: IProps) => {
  const Item = () => (
    <Box flex={1} alignItems="center">
      <AnimatedBox
        backgroundColor="gray25"
        borderRadius={4}
        opacity={opacity}
        width={80}
        height={16}
        marginBottom="spacing-xs"
      />
      <AnimatedBox
        backgroundColor="gray25"
        borderRadius={4}
        opacity={opacity}
        width={50}
        height={12}
      />
    </Box>
  );

  const SeparatorT = () => (
    <AnimatedBox
      backgroundColor="gray25"
      borderRadius={4}
      opacity={opacity}
      width={1}
      height={50}
    />
  );

  return (
    <Box
      flex={1}
      flexDirection="row"
      alignItems="center"
      justifyContent="space-evenly"
    >
      {[...Array(nItems)].map((_, inx) =>
        inx + 1 !== [...Array(nItems)].length ? (
          <Fragment key={`item-${inx}`}>
            <Item />
            <SeparatorT />
          </Fragment>
        ) : (
          <Item key={`item-${inx}`} />
        )
      )}
    </Box>
  );
};