import { Search } from 'lucide-react';
import type { ReactNode } from 'react';
import { Input } from './Input';

interface SearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  onSubmit?: () => void;
  actions?: ReactNode;
  /** When true, renders inline without the outer surface-card wrapper (for nested panels). */
  embedded?: boolean;
}

export function SearchBar({
  value,
  onChange,
  placeholder,
  onSubmit,
  actions,
  embedded = false,
}: SearchBarProps) {
  const field = (
    <div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-center ${embedded ? '' : 'flex-1'}`}>
      <div className="flex-1 min-w-0 w-full">
        <Input
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') onSubmit?.();
          }}
          icon={<Search className="h-4 w-4 icon-flat" />}
        />
      </div>
      {actions && <div className="flex flex-wrap gap-2 shrink-0 w-full sm:w-auto">{actions}</div>}
    </div>
  );

  if (embedded) {
    return field;
  }

  return <div className="surface-card p-3 sm:p-4">{field}</div>;
}
