import styled from 'styled-components';

type RoundButtonProps = {
  active?: boolean;
  top?: number;
  right?: number;
  size?: 'default' | 'small';
  hasCount?: boolean;
};

export const RoundButton = styled.button<RoundButtonProps>`
  position: absolute;
  top: ${({ top }) => `${top || 0}px`};
  right: ${({ right }) => `${right || 0}px`};
  background: ${({ active, theme }) =>
    active ? theme.colors.neutral[800] : '#fff'};
  border: 1.5px solid
    ${({ theme, active }) => theme.colors.neutral[active ? 800 : 700]};
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  padding: ${({ hasCount }) => (hasCount ? `0px 8px` : `0px`)};
  gap: 4px;
  min-width: ${({ size }) => `${size === 'small' ? 32 : 40}px`};
  height: ${({ size }) => `${size === 'small' ? 32 : 40}px`};
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;

  svg {
    width: ${({ size }) => `${size === 'small' ? 24 : 32}px`};
    height: ${({ size }) => `${size === 'small' ? 24 : 32}px`};
  }

  &:hover {
    border: 1.5px solid ${({ theme }) => theme.colors.neutral[800]};
  }

  &:disabled {
    box-shadow: none;
    cursor: default;
    border: 1.5px solid
      ${({ theme, active }) => theme.colors.neutral[active ? 800 : 100]};
    }
  }
`;

export const MobileTapArea = styled.button<RoundButtonProps>`
  position: absolute;
  top: ${({ top }) => `${(top || 0) - 10}px`};
  right: ${({ right }) => `${(right || 0) - 10}px`};
  background: transparent;
  border: none;
  width: 60px;
  height: 60px;
  padding: 0;
  z-index: 1;

  @media (min-width: ${({ theme }) => theme.screens.mobile}) {
    display: none;
  }
`;