'use client';

import { useState } from 'react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

interface UserSearchProps {
    onSearch: (searchTerm: string) => void;
    isLoading: boolean;
}

export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
    const [searchTerm, setSearchTerm] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (searchTerm.trim()) {
            onSearch(searchTerm.trim());
        }
    };

    return (
        <form onSubmit={handleSubmit} className="mb-6">
            <div className="flex gap-2">
                <div className="flex-1">
                    <label htmlFor="search" className="sr-only">
                        جستجو با ایمیل یا شماره موبایل
                    </label>
                    <div className="relative">
                        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
                        </div>
                        <input
                            type="text"
                            id="search"
                            className="block w-full pr-10 pl-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                            placeholder="جستجو با ایمیل یا شماره موبایل..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            dir="rtl"
                        />
                    </div>
                </div>
                <button
                    type="submit"
                    disabled={isLoading || !searchTerm.trim()}
                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    {isLoading ? 'در حال جستجو...' : 'جستجو'}
                </button>
            </div>
        </form>
    );
}