import React from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
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>;
}

// TODO Logic for picking icon
export const CardPill: React.FC<CardPillProps> = ({ label, color, icon, size = "small" }) => {
  return (
    <Chip
      color={color ?? "success"}
      icon={icon ?? (color === "success" ? <CheckCircleIcon /> : <CancelIcon />)}
      label={label}
      size={size}
    />
  );
};

export default CardPill;