import { css, styled } from "../../theme";
import { pxToRem } from "../../utils";
import type { CSSSingleVariant } from "../../theme";

export const labelVariantsStyles = {
  base: {
    backgroundColor: "$light-steel-blue",
    color: "$light-off-white",
  },
  success: {
    backgroundColor: "$light-green",
    color: "$light-chromia-dark",
  },
  warning: {
    backgroundColor: "$light-orange",
    color: "$light-off-white",
  },
  error: {
    backgroundColor: "$light-red",
    color: "$light-chromia-dark",
  },
} satisfies CSSSingleVariant;

export const sizeVariantsStyles = {
  s: {
    height: "$3",
    px: "$1",
    textTransform: "uppercase",
    borderRadius: "$xs",
  },
  l: {
    height: "$4",
    px: "$3",
    textTransform: "capitalize",
    borderRadius: "$round",
  },
} satisfies CSSSingleVariant;

type LabelVariantProps = {
  variant?: keyof typeof labelVariantsStyles;
  size?: keyof typeof sizeVariantsStyles;
};

export const labelDefaultVariants = {
  variant: "base",
  size: "l",
} satisfies LabelVariantProps;

const labelStyle = css({
  display: "inline-flex",
  alignItems: "center",
  borderWidth: pxToRem(1),
  borderStyle: "solid",
  borderColor: "$gray-2",
  fontWeight: "$bold",
  fontSize: "$1",
  fontFamily: "$text",

  variants: {
    variant: labelVariantsStyles,
    size: sizeVariantsStyles,
  },

  defaultVariants: labelDefaultVariants,
});

export const styledLabel = styled("div", labelStyle);