import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import { Theme } from '@material-hu/mui/styles';

const gradient = (theme: Theme) =>
  `linear-gradient(to right, ${theme.palette.new.background.layout.default} 30%, transparent 100%)`;

const gradientReverse = (theme: Theme) =>
  `linear-gradient(to left, ${theme.palette.new.background.layout.default} 30%, transparent 100%)`;

type SideFadeProps = {
  side: 'left' | 'right';
  children: React.ReactNode;
};

export const SideFade = ({ side, children }: SideFadeProps) => (
  <Stack
    sx={{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: side === 'left' ? -10 : 'auto',
      right: side === 'right' ? -10 : 'auto',
      width: 35,
      zIndex: 120,
      alignItems: 'center',
      justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
      flexDirection: 'row',
    }}
  >
    <Box
      sx={{
        background: side === 'left' ? gradient : gradientReverse,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      }}
    />
    <Box
      sx={{
        position: 'relative',
        zIndex: 1,
      }}
    >
      {children}
    </Box>
  </Stack>
);