import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

type CaptionsProps = {
  captions?: string | null;
  variant?: 'globalXXS' | 'globalL';
  sx?: SxProps;
};

const Captions: FC<CaptionsProps> = props => {
  const { captions, variant = 'globalXXS', sx } = props;

  if (!captions) return null;

  const bottomSpacing = {
    globalXXS: 1,
    globalL: 4,
  };

  return (
    <Stack
      sx={{
        position: 'absolute',
        bottom: theme => theme.spacing(bottomSpacing[variant]),
        left: '50%',
        transform: 'translateX(-50%)',
        borderRadius: theme => theme.shape.borderRadiusM,
        padding: theme => theme.spacing(1),
        backgroundColor: theme => theme.palette.shadows?.inverted,
        color: theme => theme.palette.common.white,
        zIndex: 1,
        ...sx,
      }}
    >
      <Typography
        variant={variant}
        color={theme => theme.palette.new.text.neutral.inverted}
      >
        {captions}
      </Typography>
    </Stack>
  );
};

export default Captions;
