import styled, { CSSObject } from "styled-components";
import {
  ButtonColor,
  CustomColor,
  ButtonSize,
  ButtonHeight,
} from "../ButtonProps";
import {
  getOnPrincipalColorFromTheme,
  getPrincipalColorFromTheme,
} from "../ButtonHelpers";
import { theme } from "data/dataMx";

interface IStylesProps {
  color: ButtonColor;
  width?: string;
  customColor: CustomColor;
  font: string;
  size: ButtonSize;
  styles?: CSSObject;
}

export const GeneralStyledBtn = styled.button`
  ${({ styles }) => styles}
  cursor: pointer;
  align-items: center;
  background-color: ${theme.transparent};
  border-radius: 4px;
  border: none;
  color: ${({ color, customColor }: IStylesProps) =>
    color === "custom"
      ? theme[getPrincipalColorFromTheme(customColor)]
      : theme[color]};
  display: flex;
  font-size: ${({ size }: IStylesProps) =>
    size === "small" ? "12px" : "16px"};
  font-weight: 700;
  font-family: ${({ font }: IStylesProps) => font};
  height: ${({ size }: IStylesProps) => ButtonHeight[size]};
  justify-content: center;
  letter-spacing: 0.5px;
  line-height: 16px;
  width: ${({ width }: IStylesProps) => width};
  padding: 8px 24px;

  &:hover {
    color: ${({ color, customColor }: IStylesProps) =>
      color === "custom"
        ? getOnPrincipalColorFromTheme(customColor)
        : color === "primary"
        ? theme.primary300
        : theme.secondary300};
  }

  &:active {
    border: ${"4px solid" + theme.tertiary100};
    color: ${({ color, customColor }: IStylesProps) =>
      color === "custom"
        ? getOnPrincipalColorFromTheme(customColor)
        : color === "primary"
        ? theme.primary300
        : theme.secondary300};
  }

  &:disabled {
    background-color: ${theme.neutral200};
    border-radius: 4px;
    border: ${"1px solid" + theme.neutral400};
    color: ${theme.neutral500};
  }
`;
