// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import type { ComponentProps } from "react";
export type StatusProps = ComponentProps<"span"> & {
  status: "online" | "offline" | "maintenance" | "degraded";
};
export function Status({
  status,
  className = "",
  children,
  ...props
}: StatusProps) {
  return (
    <span className={`ynr-status ${className}`} data-status={status} {...props}>
      <span className="ynr-status-dot" aria-hidden="true" />
      {children ?? status[0].toUpperCase() + status.slice(1)}
    </span>
  );
}