/* eslint-disable react/prop-types */
import { Search } from 'lucide-react';

export const RecipeSearchBar = ({ onSearch }) => (
  <div className="search-container">
    <input
      type="text"
      placeholder="Search recipes..."
      onChange={(e) => onSearch(e?.target?.value)}    
      className="search-input"
    />
    <Search className="search-icon" />
  </div>
);