import styled from 'styled-components';
import { ThemeInterface } from '../../typings/styled-components';

type WrapperProps = {
  visable: boolean;
  size?: 'default' | 'small';
  parentWidth?: number;
};

export const Wrapper = styled.div<WrapperProps>`
  display: flex;
  gap: 8px;
  align-items: center;
  background: ${({ theme }) => theme.colors.neutral[800]};
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 12px 16px;
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% - 97px);
  opacity: ${({ visable }) => (visable ? 0.95 : 0)};
  transition: 0.3s;
  z-index: ${({ visable }) => (visable ? 11 : -1)};

  ${({ size, parentWidth, theme }) =>
    shouldShowSmallVariant(size, theme, parentWidth) &&
    `
		flex-direction: column;
		padding: 8px 12px;
		top: calc(50% - 32px);
		left: calc(50% - 62px);

		svg {
			width: 20px;
			height: 20px;
		}

		span {
			font-size: 12px;
		}
	`}
`;

const shouldShowSmallVariant = (
  size: 'default' | 'small' | undefined,
  theme: ThemeInterface,
  parentWidth?: number
) => {
  return (
    size === 'small' ||
    (parentWidth && parentWidth < parseInt(theme.screens.mobile) / 2)
  );
};