import { styled } from "../../theme";
import { pxToRem } from "../../utils";

export const iconButtonSizes = {
  l: {
    size: pxToRem(48),
  },
  m: {
    size: pxToRem(32),
  },
  s: {
    size: pxToRem(20),
  },
};

export const iconButtonVariants = {
  primary: {
    backgroundColor: "$light-purple",
    color: "$dark-chromia-dark",
    "&:hover:not([disabled])": { backgroundColor: "$dark-purple" },
  },
  secondary: {
    backgroundColor: "$off-white-9",
    color: "$light-off-white",
    "&:hover:not([disabled])": { backgroundColor: "$off-white-18" },
  },
  ghost: {
    "&:hover:not([disabled])": { backgroundColor: "$off-white-9" },
    color: "$light-off-white",
  },
  "ghost-dark": {
    "&:hover:not([disabled])": { backgroundColor: "$dark-off-white" },
    color: "$dark-chromia-dark",
  },
};

export const iconButtonStyle = {
  position: "relative",
  overflow: "hidden",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "$round",
  cursor: "pointer",

  "&:focus": {
    boxShadow: `inset 0 0 0 ${pxToRem(4)} $off-white-72`,
  },

  "&:disabled": {
    opacity: "$disabled",
  },

  variants: {
    size: iconButtonSizes,
    variant: iconButtonVariants,
  },

  defaultVariants: {
    variant: "primary",
    size: "m",
  },
};

export const StyledIconButton = styled("button", { ...iconButtonStyle });