import type { ReactNode } from "react";

export type SymbolDomain =
  | "neutral"
  | "pneumatic"
  | "mechanical"
  | "signal"
  | "medium";

type SymbolSvgProps = {
  children: ReactNode;
  className?: string;
  domain?: SymbolDomain;
  viewBox?: string;
};

export const SYMBOL_STROKE = "var(--component-symbol-stroke, currentColor)";
export const SYMBOL_FILL = "var(--component-symbol-fill, #ffffff)";
export const SYMBOL_ACCENT = "var(--component-symbol-accent, currentColor)";
export const SYMBOL_MUTED = "var(--component-symbol-muted, #64748b)";

export function SymbolSvg({
  children,
  className,
  domain = "neutral",
  viewBox = "0 0 64 48",
}: SymbolSvgProps) {
  return (
    <svg
      aria-hidden="true"
      className={["component-symbol-svg", className].filter(Boolean).join(" ")}
      data-symbol-domain={domain}
      fill="none"
      focusable="false"
      viewBox={viewBox}
      xmlns="http://www.w3.org/2000/svg"
    >
      {children}
    </svg>
  );
}