import { DialogContent } from '@reach/dialog';
import { animated } from 'react-spring/renderprops.cjs';
import { Card } from '../Card';
import { styled } from '../../styles';
import { IconButton } from '../IconButton';

export interface StyleProps {
  isCentered?: boolean;
  maxWidth?: number;
}

export const Container = animated(
  styled(DialogContent)({
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    maxHeight: '100%',
    overflowY: 'auto',
    overflowX: 'hidden',
  })
);

export const Dialog = styled(Card)(() => ({
  display: 'flex',
  minHeight: '100%',
}));

export const Inner = styled.div<StyleProps>`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: 'auto';
`;

export const CloseButton = styled(IconButton)({
  flexShrink: 0,
});
