import * as React from 'react'
import { cn } from '@/lib/utils'

export type KbdProps = React.ComponentProps<'kbd'>

function Kbd({ className, ...props }: KbdProps) {
  return (
    <kbd
      className={cn(
        'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 !font-sans text-xs font-medium',
        'bg-fill-secondary text-text-secondary',
        '[.tooltip-content_&]:bg-bg-highlight-hover [.tooltip-content_&]:text-text-on-primary',
        'dark:[.tooltip-content_&]:bg-[color:var(--color-bg-base)]/10 dark:[.tooltip-content_&]:text-[var(--color-bg-base)]',
        className
      )}
      {...props}
    />
  )
}
Kbd.displayName = 'Kbd'

export interface KbdGroupProps extends React.ComponentProps<'span'> {
  separator?: React.ReactNode
}

function KbdGroup({
  className,
  children,
  separator = '+',
  ...props
}: KbdGroupProps) {
  const items = React.Children.toArray(children)
  return (
    <span className={cn('inline-flex items-center gap-1', className)} {...props}>
      {items.map((child, index) => (
        <React.Fragment key={index}>
          {child}
          {index < items.length - 1 && (
            <span className="select-none !font-sans text-xs font-medium text-text-secondary">
              {separator}
            </span>
          )}
        </React.Fragment>
      ))}
    </span>
  )
}
KbdGroup.displayName = 'KbdGroup'

export { Kbd, KbdGroup }