import createUseStyles from "./theme/createUseStyles";
import { cn } from "./util/cn";

const useStyles = createUseStyles({
  root: {
    height: 10,
    width: 10,
  },
});

export default function StatusIndicator({
  active = false,
  positive = false,
  intermediary = false,
  negative = false,
}: {
  active?: boolean;
  intermediary?: boolean;
  negative?: boolean;
  positive?: boolean;
}) {
  const classes = useStyles();

  return (
    <div
      className={cn("inline-block cursor-pointer border-radius-round", classes.root, {
        ["bg-grey"]: !active && !positive && !intermediary && !negative,
        ["bg-black"]: active,
        ["bg-green"]: positive,
        ["bg-warningOrange"]: intermediary,
        ["bg-lightRed"]: negative,
      })}
    />
  );
}
