// src/components/SearchBar.js
import React from 'react';


const SearchBar = ({ onSearch }) => (
    <div className="search-bar" style={styles.container}>
      <input
        type="text"
        className="search-input"
        placeholder="Search"
        onChange={(e) => onSearch(e.target.value)}
        style={styles.input}
      />
      <button className="search-button" style={styles.button}>
        <i className="fa fa-search" style={styles.icon}></i>
      </button>
    </div>
);

export default SearchBar;


const styles = {
    container: {
      padding: '0.1rem',
      display: 'flex',
      alignItems: 'center',
      margin: '0 0.5rem 0 0.6rem'
    },
    input: {
      width: '100%',
      padding: '6px',
      borderRadius: '4px 0 0 4px',
      border: '1px solid #ddd',
      outline: 'none',
      fontSize: '0.9em',
    },
    button: {
      padding: '6px',
      border: '1px solid #ddd',
      borderLeft: 'none',
      borderRadius: '0 4px 4px 0',
      backgroundColor: '#fff',
      cursor: 'pointer',
    },
    icon: {
      color: '#555',
      fontSize: '0.9em',
    },
};
