type Props = {
  suggestions: string[]
}

export default function AnswerPanel({ suggestions }: Props) {
  return (
    <div className="panel answer-panel">
      <div className="panel-title">대답</div>
      <div className="answer-content">
        {suggestions.length === 0 ? (
          <div className="placeholder">질문이 감지되면 답변 후보가 표시됩니다.</div>
        ) : (
          <ul className="answer-list">
            {suggestions.map((item, idx) => (
              <li key={`${item}-${idx}`}>{item}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}
