import { useState } from 'react';
import { Search } from 'lucide-react';

export interface ConsoleSearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
  style?: React.CSSProperties;
}

export function ConsoleSearchBar({
  value,
  onChange,
  placeholder = 'Search',
  className,
  style,
}: ConsoleSearchBarProps) {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <form
      role="search"
      className={className}
      onSubmit={(event) => event.preventDefault()}
      style={{
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        width: '100%',
        ...style,
      }}
    >
      <Search
        size={14}
        style={{
          position: 'absolute',
          left: 10,
          color: 'var(--color-ink-4)',
          pointerEvents: 'none',
        }}
      />
      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder={placeholder}
        aria-label={placeholder}
        style={{
          height: 32,
          width: '100%',
          borderRadius: 12,
          border: `1px solid ${isFocused ? 'var(--color-brand)' : 'var(--color-line)'}`,
          background: isFocused ? 'var(--color-surface)' : 'var(--color-surface-subtle)',
          paddingLeft: 32,
          paddingRight: 12, // Removed space for kbd since it's not present here
          fontSize: 13,
          color: 'var(--color-ink-1)',
          outline: 'none',
          transition: 'border-color .2s, background .2s',
          boxShadow: 'none',
        }}
      />
    </form>
  );
}