import React from 'react';
import { StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../../../common/s-components/layout/s-box';
import { theme } from '../../../app/theme';

type TProps = {
  height?: number;
  children: React.ReactNode;
};

export const BlockWrapper: React.FC<TProps> = props => {
  const { children, height } = props;
  return (
    <SBox
      bg="fiord"
      height={height}
      borderRadius={10}
      pt={30}
      position="relative"
      mb={16}
    >
      <LinearGradient
        style={[
          StyleSheet.absoluteFill,
          {
            opacity: 0.4,
            borderRadius: 10,
          },
        ]}
        colors={theme.gradients.topSliderShadeAvatar}
        locations={[1, 0]}
      />
      {children}
    </SBox>
  );
};

BlockWrapper.defaultProps = {
  height: 160,
};