"use client";

import React from "react";
import { filterChipClass } from "@/lib/ui/buttonStyles";
interface UsernameSuggestionsProps {
  suggestions: string[];
  onSelect: (username: string) => void;
}

export default function UsernameSuggestions({
  suggestions,
  onSelect,
}: UsernameSuggestionsProps) {
  if (!suggestions.length) return null;

  return (
    <div className="flex flex-wrap justify-center gap-2 mt-3 w-full max-w-[290px]">
      {suggestions.map((username) => (
        <button
          key={username}
          type="button"
          onClick={() => onSelect(username)}
          className={filterChipClass(false, "dir-ltr px-3 py-1.5 text-sm")}
        >
          {username}
        </button>
      ))}
    </div>
  );
}
