import type { Component } from "solid-js";

type Props = { state: string; label?: string };

// StatusBadge renders a state pill. Background color is a CSS custom
// property on the :root so themes can override centrally.
const StatusBadge: Component<Props> = (props) => {
  return (
    <span class="status-badge" data-state={props.state}>
      {props.label ?? props.state}
    </span>
  );
};

export default StatusBadge;