interface SynonymsDisplayProps {
  synonyms: string[]
  className?: string
  showLabel?: boolean
}

export const SynonymsDisplay: React.FC<SynonymsDisplayProps> = ({
  synonyms,
  className = '',
  showLabel = true
}) => {
  if (!synonyms || synonyms.length === 0) {
    return null
  }

  return (
    <div className={`inline-flex items-center gap-2 ${className}`}>
      {showLabel && (
        <span className="text-sm font-medium text-gray-500">同義詞:</span>
      )}
      <div className="flex flex-wrap gap-1">
        {synonyms.map((synonym, index) => (
          <span
            key={index}
            className="px-2 py-1 bg-blue-100 text-blue-700 text-sm rounded-full font-medium"
          >
            {synonym}
          </span>
        ))}
      </div>
    </div>
  )
}