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

export const AlternativeItem = ({ opacity }: IOpacity) => {
  return (
    <Box flex={1} flexDirection="row" alignItems="center">
      <Box flex={1}>
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={180}
          height={14}
          marginBottom="spacing-xs"
        />
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={150}
          height={18}
          marginBottom="spacing-xs"
        />
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={120}
          height={12}
        />
      </Box>
      <Box>
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={48}
          height={48}
        />
      </Box>
    </Box>
  );
};
