import type { ReactElement } from "react";

export type DotVariant = "teal" | "blue" | "amber" | "red" | "muted";

export interface DotProps {
  variant?: DotVariant;
  className?: string;
}

interface DotColorDef {
  bg: string;
  shadow: string;
}

export function Dot({ variant = "muted", className = "" }: DotProps): ReactElement {
  const colors: Record<DotVariant, DotColorDef> = {
    teal: { bg: "var(--success)", shadow: "0 0 5px var(--success)" },
    blue: { bg: "var(--primary)", shadow: "0 0 5px var(--primary)" },
    amber: { bg: "var(--warn)", shadow: "0 0 5px var(--warn)" },
    red: { bg: "var(--danger)", shadow: "0 0 5px var(--danger)" },
    muted: { bg: "var(--muted)", shadow: "none" },
  };

  const { bg, shadow } = colors[variant];

  return (
    <span
      className={`inline-block ${className}`}
      style={{
        width: 7,
        height: 7,
        borderRadius: "50%",
        background: bg,
        boxShadow: shadow,
      }}
      aria-hidden="true"
    />
  );
}