'use client';

import Link from 'next/link';
import { useState } from 'react';
import useSWR from 'swr';
import type { UserSummaryDTO } from '@musicshare/shared';
import { fetcher } from '@/lib/api';
import { useDebounced } from '@/lib/useDebounced';
import { Avatar } from './Avatar';

export function UserSearch({ placeholder = 'Find friends by username' }: { placeholder?: string }) {
  const [q, setQ] = useState('');
  const debounced = useDebounced(q.trim(), 250);
  const { data } = useSWR<UserSummaryDTO[]>(
    debounced.length >= 2 ? `/users/search?q=${encodeURIComponent(debounced)}` : null,
    fetcher,
  );
  return (
    <div className="search">
      <input placeholder={placeholder} aria-label="Search people" value={q} onChange={(e) => setQ(e.target.value)} />
      {data && debounced.length >= 2 && (
        <ul className="search-results">
          {data.length === 0 && <li className="muted">No one found</li>}
          {data.map((u) => (
            <li key={u.id}>
              <Link href={`/u/${u.username}`} className="user-chip">
                <Avatar user={u} size={28} />
                <span>{u.displayName ?? u.username}</span>
                <span className="muted">@{u.username}</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}