import * as React from "react";

export interface PillProps {
  children: React.ReactNode;
  /** "work" recolors border+text to the accent red - use for a highlighted tag. */
  variant?: "default" | "work";
  className?: string;
}

export function Pill({ children, variant = "default", className }: PillProps) {
  const classes = ["ads-pill"];
  if (variant === "work") classes.push("ads-pill--work");
  if (className) classes.push(className);
  return <span className={classes.join(" ")}>{children}</span>;
}
