import React, { memo } from 'react'

interface HintPanelProps {
  isVisible: boolean
  definition: string
  synonyms?: string[]
  className?: string
}

export const HintPanel = memo<HintPanelProps>(({
  isVisible,
  definition,
  synonyms = [],
  className = ''
}) => {
  if (!isVisible) return null

  return (
    <div className={`mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg ${className}`}>
      <h4 className="font-semibold text-yellow-800 mb-2">詞彙定義：</h4>
      <p className="text-yellow-800 mb-3">{definition}</p>

      {synonyms && synonyms.length > 0 && (
        <div>
          <h4 className="font-semibold text-yellow-800 mb-2">同義詞提示：</h4>
          <div className="flex flex-wrap gap-2">
            {synonyms.map((synonym, index) => (
              <span
                key={index}
                className="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full font-medium border border-yellow-300"
              >
                {synonym}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  )
})

HintPanel.displayName = 'HintPanel'