import styled from 'styled-components';

import { ThemeObject } from '../Theme';

const getBoxShadow = (theme: ThemeObject, selected: boolean, hover = false) => {
  if (!selected) return 'none';
  return `0px 5px ${hover ? 55 : 15}px 0px ${theme.background.shadow}`;
};

export const StyledCardContainer = styled.div.attrs((props: { $theme: ThemeObject; $selected: boolean }) => ({
  $theme: props.$theme,
  $selected: props.$selected,
}))`
  background-color: ${(props) => props.$theme.background.light};
  -webkit-box-shadow: ${(props) => getBoxShadow(props.$theme, props.$selected)};
  -moz-box-shadow: ${(props) => getBoxShadow(props.$theme, props.$selected)};
  box-shadow: ${(props) => getBoxShadow(props.$theme, props.$selected)};
  transition: all 0.25s;
  :hover {
    -webkit-box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
    -moz-box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
    box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
    cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
  }
  :active {
    transform: scale(${(props) => (props.onClick ? 0.99 : 1)});
  }
`;
