import React, { useState } from 'react';
import { useTranslations } from '../hooks/useTranslation';

const Search = ({ handleSearch }) => {
    const { t } = useTranslations();
    const [searchTerm, setSearchTerm] = useState('');

    const handleChange = (e) => {
        setSearchTerm(e.target.value);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        handleSearch(searchTerm);
    };

    return (
        <div className="relative max-w-sm">
            <form onSubmit={handleSubmit}>
                <input 
                    className="w-full min-w-[300px] py-2 px-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-[46px]" 
                    type="text" 
                    value={searchTerm} 
                    onChange={handleChange} 
                    placeholder={t('search_placeholder')}
                    aria-label={t('search_aria_label')}
                />
                <button 
                    className="absolute max-h-[46px] inset-y-0 right-0 flex items-center px-4 text-gray-700 bg-gray-100 border border-gray-300 rounded-r-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    aria-label={t('search_button_aria_label')}
                >
                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fillRule="evenodd" clipRule="evenodd" d="M14.795 13.408l5.204 5.204a1 1 0 01-1.414 1.414l-5.204-5.204a7.5 7.5 0 111.414-1.414zM8.5 14A5.5 5.5 0 103 8.5 5.506 5.506 0 008.5 14z"/>
                    </svg>
                </button>
            </form>
        </div>
    );
};

export default Search;