import { Loader2 } from 'lucide-react';

import { forwardRef } from 'react';

import { Input } from '@/Components/ui/input';
import { cn } from '@/lib/utils';

interface AdminSearchInputProps extends React.ComponentProps<typeof Input> {
  isPending?: boolean;
}

export const AdminSearchInput = forwardRef<HTMLInputElement, AdminSearchInputProps>(
  function AdminSearchInput({ isPending = false, className, ...props }, ref) {
    return (
      <div className="relative">
        <Input ref={ref} {...props} className={cn(isPending ? 'pr-9' : '', className)} />
        {isPending && (
          <Loader2
            className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 animate-spin text-muted-foreground"
            aria-hidden="true"
          />
        )}
      </div>
    );
  },
);