/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';

export const Button = styled.default.button<{
  backgroundColor?: string;
  borderColor?: string;
  textColor?: string;
  disabled?: boolean;
}>`
  ${({backgroundColor, textColor, borderColor}) => styled.css`
    color: ${textColor || Theme.colors.white};
    background-color: ${backgroundColor || Theme.colors.white};
    border-color: ${borderColor || backgroundColor || Theme.colors.lightRed};
  `}
  ${({disabled}) => styled.css`
    opacity: ${disabled ? 0.8 : 1};
    cursor: ${disabled ? 'not-allowed' : 'pointer'};
  `}
  min-width: 120px;
  text-align: center;
  outline: none;
  vertical-align: middle;
  border-radius: ${Theme.primaryBorderRadius};
  padding: ${Theme.spacing.small} ${Theme.spacing.medium};
  font-size: ${Theme.typography.primaryFontSize};
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
`;

export const FilterButton = styled.default(Button)`
  font-weight: bolder;
  justify-self: center;
  margin: 0 ${Theme.spacing.xSmall};
  padding: ${Theme.spacing.small} ${Theme.spacing.xlarge};
`;

export const ConfirmButton = styled.default(Button)`
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const CancelButton = styled.default(ConfirmButton)``;

export const CustomButton = styled.default(Button)`
  background-color: ${Theme.dangerColor};
  border-color: ${Theme.dangerColor};
  color: ${Theme.colors.white};
  font-weight: bolder;
  justify-self: center;
  margin: 0.75rem;
  padding: ${Theme.spacing.small} ${Theme.spacing.xlarge};
  overflow: visible;
`;
