import React from 'react';
import { useTranslation } from '../i18n';
import './SearchBar.css';

function SearchBar({ value, onChange, placeholder }) {
  const { t } = useTranslation();
  return (
    <div className="search-bar-container">
      <div className="search-bar">
        <span className="search-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="7" />
            <path d="m20 20-3.5-3.5" />
          </svg>
        </span>
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          className="search-input"
        />
        {value && (
          <button
            className="clear-button"
            onClick={() => onChange('')}
            aria-label={t('search.clear')}
          >
            ✕
          </button>
        )}
      </div>
    </div>
  );
}

export default SearchBar;