"use client";

import React from "react";

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="px-3 py-1.5 text-sm font-medium rounded-full border border-[#387E65] text-[#387E65] bg-white hover:bg-[#387E65]/10 transition-colors dir-ltr"
        >
          {username}
        </button>
      ))}
    </div>
  );
}
