import React from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import WarningIcon from "@mui/icons-material/Warning";
import { ChipPropsSizeOverrides } from "@mui/material/Chip";
import { OverridableStringUnion } from "@mui/types";

import Chip from "../Chip";

import { Pill } from "./shared";

export interface CardPillProps extends Pill {
  size?: OverridableStringUnion<"small" | "medium", ChipPropsSizeOverrides>;
  variant?: "filled" | "outlined";
}

// TODO Logic for picking icon
export const CardPill: React.FC<CardPillProps> = ({
  label,
  color,
  icon,
  size = "small",
  variant,
}) => {
  let resolvedIcon: React.ReactElement | undefined;
  if (icon === undefined) {
    if (color === "success") {
      resolvedIcon = <CheckCircleIcon />;
    } else if (color === "warning") {
      resolvedIcon = <WarningIcon />;
    } else {
      resolvedIcon = <CancelIcon />;
    }
  } else {
    resolvedIcon = icon ?? undefined;
  }

  return (
    <Chip
      color={color ?? "success"}
      icon={resolvedIcon}
      label={label}
      size={size}
      variant={variant}
    />
  );
};

export default CardPill;