import { type InputHTMLAttributes } from 'react'
import { Input } from '@base-ui/react/input'
import { cn } from './cn'
import { Kbd } from './Kbd'
import { BARE_INPUT_CLASSES, FIELD_SHELL_CLASSES } from './looks'

/**
 * Peek's SearchInput (2026-09-01), verbatim: an inset field with a hairline
 * border that strengthens on focus, and an optional keyboard hint at the
 * right edge — under Signal, the hint becomes the mono `kbd` chip with the
 * thicker bottom edge.
 *
 * The one product string — Peek's default placeholder "Search Peek..." —
 * stays in Peek; the default here says only "Search…".
 *
 * The top bar's way into a launcher is not this: `TopBar`'s `onSearch` draws
 * this look as a button and answers Ctrl+K itself (8 October). Peek used to
 * make this field inert and catch the click around it.
 *
 * On Base UI's `Input` since stage 3 of the migration (2026-09-07), so a
 * search field inside a `Field` is labelled by it without the caller wiring
 * an id. The surround stays ours: the border, the focus-within rule and the
 * `Kbd` hint are this component's, not the input's.
 */
export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
  /** A keyboard hint drawn at the right edge, e.g. "Ctrl+K". */
  shortcut?: string
  className?: string
}

export function SearchInput({ shortcut, className, placeholder = 'Search…', ...props }: SearchInputProps) {
  return (
    <div
      className={cn(
        'flex gap-2 items-center px-3 py-2',
        FIELD_SHELL_CLASSES,
        // Hover strengthens the border as it does on every other field (16 September). Here that
        // is also the focus look, which was the stronger border before hover existed.
        'focus-within:border-border-strong',
        className,
      )}
    >
      <Input
        className={cn('flex-1 min-w-0 text-input-value', BARE_INPUT_CLASSES)}
        placeholder={placeholder}
        {...props}
      />
      {shortcut && <Kbd>{shortcut}</Kbd>}
    </div>
  )
}