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

interface TagChipProps {
  tag: string
  children?: ReactNode
  className?: string
  style?: CSSProperties
  onClick?: (tag: string) => void
}

export function TagChip({ tag, children, className, style, onClick }: TagChipProps) {
  const interactive = Boolean(onClick)
  const classes = ['reams-tag-chip', className].filter(Boolean).join(' ')

  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
    if (!interactive) return
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault()
      onClick?.(tag)
    }
  }

  return (
    <span
      className={classes}
      style={style}
      onClick={interactive ? () => onClick?.(tag) : undefined}
      onKeyDown={handleKeyDown}
      role={interactive ? 'button' : undefined}
      tabIndex={interactive ? 0 : undefined}
    >
      {children ?? tag}
    </span>
  )
}