// components/KBD.tsx
import React from "react"

import { cn } from "../../design-lib/utils"

interface KBDProps {
  command?: boolean
  shift?: boolean
  alt?: boolean
  ctrl?: boolean
  small?: boolean
  children?: React.ReactNode
  className?: string
}

const KBD: React.FC<KBDProps> = ({
  command,
  shift,
  alt,
  ctrl,
  small,
  children,
  className,
}) => {
  // const  font-sans" =    font-sans"
  // const smallClasses = small ? " text-xs h-7 w-7" : ""

  return (
    <span
      className={cn(
        `min-w-8 inline-flex h-8 items-center justify-center space-x-1 rounded-md border px-2 text-sm`,
        `${small ? "min-w-6 h-6 rounded-sm text-xs" : ""}`,
        className
      )}
      role="text"
    >
      {command && (
        <kbd className={cn("", "font-sans")} aria-label="Command key">
          ⌘
        </kbd>
      )}
      {shift && (
        <kbd className={cn("", "font-sans")} aria-label="Shift key">
          ⇧
        </kbd>
      )}
      {alt && (
        <kbd className={cn("", "font-sans")} aria-label="Option key">
          ⌥
        </kbd>
      )}
      {ctrl && (
        <kbd className={cn("", "font-sans")} aria-label="Control key">
          ⌃
        </kbd>
      )}
      {children && <kbd className={cn("", "font-sans")}>{children}</kbd>}
    </span>
  )
}

export default KBD