import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
import './type-chip.css'

interface TypeChipProps extends HTMLAttributes<HTMLSpanElement> {
  name: string
  color?: string
  children?: ReactNode
}

/** A Type's color belongs to its definition; the chip derives theme-aware colors. */
export function TypeChip({ name, color, children, className, style, ...props }: TypeChipProps) {
  return <span
    {...props}
    className={['reams-type-chip', className].filter(Boolean).join(' ')}
    data-colored={color ? '' : undefined}
    style={color ? { ...style, '--reams-type-color': color } as CSSProperties : style}
  ><span className="reams-type-chip-prefix">#</span>{children ?? name}</span>
}