import React from 'react';
import type { ViewStyle } from 'react-native';
import { AnimatedBox } from '../Box';
import type { IOpacity } from './skeleton';

interface IProps extends IOpacity {
  style?: ViewStyle;
  children: React.ReactNode;
}

export const WrapperItem = ({ opacity, style, children }: IProps) => {
  return (
    <AnimatedBox
      flex={1}
      flexDirection="row"
      alignItems="center"
      borderColor="gray25"
      borderWidth={1}
      opacity={opacity}
      padding="spacing-xs"
      borderRadius={4}
      style={style}
    >
      {children}
    </AnimatedBox>
  );
};