import * as React from 'react'
import { Search, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Input } from './input'

/**
 * SearchInput — Input с magnifying-glass иконкой слева и optional clear button
 * справа когда есть value. Заменяет {@code @nstart/ui} SearchInput.
 */
export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
  onClear?: () => void
}

export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
  function SearchInput({ className, value, onClear, ...props }, ref) {
    const hasValue = value !== undefined && value !== ''
    return (
      <div className="relative w-full">
        <Search
          size={14}
          strokeWidth={2}
          className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-mute"
        />
        <Input
          ref={ref}
          // type="text" вместо "search" — native browser X (Chrome/Safari)
          // дублировал custom onClear X справа ("два крестика"). Custom X
          // имеет правильный onClick handler и tracks state, native — нет.
          type="text"
          value={value}
          className={cn('pl-8', hasValue && onClear && 'pr-8', className)}
          {...props}
        />
        {hasValue && onClear && (
          <button
            type="button"
            aria-label="Очистить"
            onClick={onClear}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-mute hover:text-ink rounded-sm p-0.5 hover:bg-surface-2"
          >
            <X size={13} strokeWidth={2} />
          </button>
        )}
      </div>
    )
  },
)