import type { ReactNode } from "react";

type Accent = "secondary" | "tertiary" | "primary";

interface TechChipProps {
  children: ReactNode;
  accent?: Accent;
  className?: string;
}

const accentClasses: Record<Accent, string> = {
  primary: "text-primary",
  secondary: "text-secondary",
  tertiary: "text-tertiary",
};

export function TechChip({ children, accent = "secondary", className = "" }: TechChipProps) {
  return (
    <span
      className={`inline-flex items-center rounded-sm bg-surface-container-highest px-2.5 py-1 label-sm ${accentClasses[accent]} ${className}`}
    >
      {children}
    </span>
  );
}