interface Props {
  suggestions: string[];
  onSelect: (value: string) => void;
}

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

  return (
    <ul
      className="suggestion-list"
      style={{
        background: "#fff",
        border: "1px solid #ccc",
        maxHeight: "150px",
        overflowY: "auto",
        listStyle: "none",
        padding: 0,
        margin: 0,
      }}
    >
      {suggestions.map((s) => (
        <li
          key={s}
          onClick={() => onSelect(s)}
          style={{
            padding: "0.5em",
            cursor: "pointer",
            borderBottom: "1px solid #eee",
          }}
        >
          {s}
        </li>
      ))}
    </ul>
  );
}