Mac kbd

"use client"

import type * as React from "react"
import { ArrowBigUp, Command, Option } from "lucide-react"

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

/* Mac kbd family: platform glyph styles. The visual caps carry a unicode glyph or a lucide icon; because no glyph gives a readable name on its own, the root <kbd> always carries the sr-only full text ("Command plus K") and the visual stack is aria-hidden. Colour comes ONLY from tokens. Static - no motion required. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const box: Record<StyledSize, string> = {
  sm: "h-5 min-w-5 px-1.5 text-xs",
  md: "h-6 min-w-6 px-2 text-xs",
  lg: "h-7 min-w-7 px-2.5 text-sm",
  xl: "h-8 min-w-8 px-3 text-sm",
}

const gap: Record<StyledSize, string> = {
  sm: "gap-1",
  md: "gap-1",
  lg: "gap-1.5",
  xl: "gap-1.5",
}

const rootBase =
  "inline-flex w-fit shrink-0 select-none items-center whitespace-nowrap font-mono font-medium leading-none text-foreground"

const capBase =
  "inline-flex shrink-0 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md border border-border bg-surface-2 font-mono font-medium leading-none text-foreground [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"

/* Bir kapak: gorsel glif + ekran okuyucuya giden ad. */
interface Key {
  glyph: React.ReactNode
  name: string
}

type Props = React.ComponentProps<"kbd"> & { size?: StyledSize }

/* Shared shell: the sr-only full combination text plus aria-hidden visual caps. */
function Combo({
  keys,
  size,
  className,
  children,
  ...props
}: Props & { keys: Key[] }) {
  return (
    <kbd data-slot="styled-kbd" className={cn(rootBase, gap[size ?? "md"], className)} {...props}>
      {children ?? (
        <>
          <span className="sr-only">{keys.map((k) => k.name).join(" plus ")}</span>
          <span aria-hidden="true" className={cn("inline-flex items-center", gap[size ?? "md"])}>
            {keys.map((k, i) => (
              <kbd key={`${k.name}-${i}`} className={cn(capBase, box[size ?? "md"])}>
                {k.glyph}
              </kbd>
            ))}
          </span>
        </>
      )}
    </kbd>
  )
}

/* Symbol: saf unicode mac glifleri (Command, Option, Shift). */
export function SymbolKbd({ size = "md", ...props }: Props) {
  return (
    <Combo
      size={size}
      keys={[
        { glyph: "⌘", name: "Command" },
        { glyph: "⌥", name: "Option" },
        { glyph: "⇧", name: "Shift" },
      ]}
      {...props}
    />
  )
}

/* Mac: mac kisayolu - Command glifi + harf. */
export function MacKbd({ size = "md", ...props }: Props) {
  return (
    <Combo
      size={size}
      keys={[
        { glyph: "⌘", name: "Command" },
        { glyph: "K", name: "K" },
      ]}
      {...props}
    />
  )
}

/* Win: windows/linux karsiligi - duz metin tus adlari. */
export function WinKbd({ size = "md", ...props }: Props) {
  return (
    <Combo
      size={size}
      keys={[
        { glyph: "Ctrl", name: "Control" },
        { glyph: "K", name: "K" },
      ]}
      {...props}
    />
  )
}

/* Icon: caps carrying lucide icons instead of glyphs. */
export function IconKbd({ size = "md", ...props }: Props) {
  return (
    <Combo
      size={size}
      keys={[
        { glyph: <Command />, name: "Command" },
        { glyph: <ArrowBigUp />, name: "Shift" },
        { glyph: "P", name: "P" },
      ]}
      {...props}
    />
  )
}

/* Mixed: glif, ikon ve metin kapaklarin karisimi. */
export function MixedKbd({ size = "md", ...props }: Props) {
  return (
    <Combo
      size={size}
      keys={[
        { glyph: "⌘", name: "Command" },
        { glyph: <Option />, name: "Option" },
        { glyph: "Del", name: "Delete" },
      ]}
      {...props}
    />
  )
}