import * as React from "react";

export interface StatusRowProps {
  status: "ok" | "warn" | "bad";
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

export function StatusRow({ status, title, subtitle, onClick, className }: StatusRowProps) {
  const classes = ["ads-status"];
  if (className) classes.push(className);
  const Tag: React.ElementType = onClick ? "button" : "div";
  return (
    <Tag
      type={onClick ? "button" : undefined}
      className={classes.join(" ")}
      onClick={onClick}
    >
      <span className={`ads-dot ads-dot--${status}`} aria-hidden />
      <span className="ads-status__text">
        <span className="ads-status__t">{title}</span>
        {subtitle !== undefined && <span className="ads-status__s">{subtitle}</span>}
      </span>
    </Tag>
  );
}
