import { forwardRef, type InputHTMLAttributes } from "react";

export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
  /** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
  hint?: string;
}

/**
 * Zentrales Sucheingabefeld im Raycast/Spotlight-Stil.
 * Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
 */
export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  ({ hint, className = "", ...props }, ref) => {
    return (
      <div
        className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
          px-5 py-4 shadow-lg backdrop-blur-md transition-colors
          focus-within:border-black/20 dark:border-white/10 dark:bg-white/5
          dark:focus-within:border-white/20 ${className}`}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-5 w-5 shrink-0 text-black/40 dark:text-white/40"
        >
          <circle cx="11" cy="11" r="7" />
          <line x1="21" y1="21" x2="16.65" y2="16.65" />
        </svg>
        <input
          ref={ref}
          type="text"
          autoComplete="off"
          spellCheck={false}
          className="w-full bg-transparent text-lg text-black outline-none placeholder:text-black/30
            dark:text-white dark:placeholder:text-white/30"
          {...props}
        />
        {hint ? (
          <span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
            text-black/40 dark:border-white/10 dark:text-white/40">
            {hint}
          </span>
        ) : null}
      </div>
    );
  }
);

SearchInput.displayName = "SearchInput";