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

interface IProps extends IOpacity {
  withFooter?: boolean;
}

export const BasicItem = ({ opacity, withFooter = false }: IProps) => {
  return (
    <>
      <Box flex={1} flexDirection="row" alignItems="center">
        <Box marginRight="spacing-xs">
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={32}
            height={32}
          />
        </Box>
        <Box>
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={200}
            height={16}
          />
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            marginTop="spacing-xs"
            opacity={opacity}
            width={160}
            height={12}
          />
        </Box>
      </Box>
      {withFooter && (
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width="100%"
          height={12}
          marginTop="spacing-xs"
        />
      )}
    </>
  );
};