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;
}

export function SearchBar({
  value,
  onChange,
  placeholder,
  onSubmit,
  actions,
}: SearchBarProps) {
  return (
    <div className="surface-card p-4">
      <div className="flex gap-4 items-center">
        <div className="flex-1">
          <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 gap-2">{actions}</div>}
      </div>
    </div>
  );
}