Kbd

import * as React from "react";

import { cn } from "@/lib/utils";

export interface KbdProps extends Omit<React.ComponentPropsWithoutRef<"kbd">, "children"> {
  keys: string[];
}

/** Native <kbd> — no ARIA needed, a screen reader reads the visible text ("Ctrl + K") as-is. */
export function Kbd({ keys, className, ...props }: KbdProps) {
  return (
    <kbd
      className={cn(
        "inline-flex items-center gap-0.5 rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground",
        className,
      )}
      {...props}
    >
      {keys.map((key, index) => (
        <React.Fragment key={index}>
          {index > 0 ? (
            <span aria-hidden="true" className="text-muted-foreground/50">
              +
            </span>
          ) : null}
          <span>{key}</span>
        </React.Fragment>
      ))}
    </kbd>
  );
}