import type { ReactNode } from 'react'

export interface ChipProps {
  children: ReactNode
  className?: string
}

/** Small muted pill used for email addresses, purpose tags and token states. */
export function Chip({ children, className = '' }: ChipProps) {
  return (
    <span className={`badge inline-flex items-center gap-1.5 rounded-lg bg-muted px-3 py-1.5 ${className}`}>
      {children}
    </span>
  )
}

export interface PillProps {
  children: ReactNode
}

/** Tighter uppercase mono tag next to an address chip. */
export function Pill({ children }: PillProps) {
  return (
    <span className="badge inline-flex items-center rounded-md bg-muted px-2.5 py-1 font-mono text-[9.5px] font-bold tracking-[1px] text-muted-foreground uppercase">
      {children}
    </span>
  )
}