import styled, {css} from 'styled-components';
import {
  white,
  borderRadius,
  baseShadow,
  spacing,
} from '@propellerads/stylevariables';
import {POSITION} from './types';

interface StyledCookieCardProps {
    position: POSITION
}

const StyledCookieCard = styled.div`
  width: 320px;
  border-radius: ${borderRadius}px;
  background-color: ${white};
  box-shadow: ${baseShadow};
  position: fixed;
  z-index: 99999;
  bottom: ${spacing * 5}px;
  padding: ${spacing * 5}px;

  ${(props: StyledCookieCardProps) => (props.position === POSITION.RIGHT_BOTTOM && css`
    right: ${spacing * 5}px;
  `)};

  ${(props: StyledCookieCardProps) => (props.position === POSITION.LEFT_BOTTOM && css`
    left: ${spacing * 5}px;
  `)};
`;

const CookieInfo = styled.div`
    margin-bottom: ${spacing * 3}px;
`;
const CookieTitle = styled.div`
    margin-bottom: ${spacing * 3}px;
`;

const CookieAction = styled.div`
`;

export {
  StyledCookieCard,
  CookieInfo,
  CookieTitle,
  CookieAction,
};