'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 (
        <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-4 mb-6">
            <form onSubmit={handleSubmit}>
                <label htmlFor="user-search" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    جستجوی کاربر
                </label>
                <div className="flex gap-2">
                    <div className="flex-1 relative">
                        <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
                            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
                        </div>
                        <input
                            type="text"
                            id="user-search"
                            className="block w-full pr-11 pl-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:bg-white dark:focus:bg-gray-800 sm:text-sm transition-all duration-150"
                            placeholder="ایمیل یا شماره موبایل کاربر را وارد کنید..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            dir="rtl"
                        />
                    </div>
                    <button
                        type="submit"
                        disabled={isLoading || !searchTerm.trim()}
                        className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 shadow-sm shadow-indigo-500/20 whitespace-nowrap"
                    >
                        {isLoading ? (
                            <>
                                <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                در حال جستجو
                            </>
                        ) : (
                            <>
                                <MagnifyingGlassIcon className="h-4 w-4" />
                                جستجو
                            </>
                        )}
                    </button>
                </div>
            </form>
        </div>
    );
}
