/**
 * BoostMedia AI Content Generator Admin - Expandable Keywords Component
 *
 * Shows first N keyword chips with expand/collapse on click.
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useState } from 'react'
import { t } from '../../lib/i18n'

interface ExpandableKeywordsProps {
  keywords: string[]
  limit?: number
  className?: string
}

export function ExpandableKeywords({ keywords, limit = 5, className = '' }: ExpandableKeywordsProps) {
  const [expanded, setExpanded] = useState(false)

  if (keywords.length === 0) {
    return <span className="text-bc-gray-400">—</span>
  }

  const isLong = keywords.length > limit
  const visible = expanded || !isLong ? keywords : keywords.slice(0, limit)
  const hiddenCount = keywords.length - limit

  return (
    <div
      className={`flex flex-wrap gap-1 ${isLong ? 'cursor-pointer' : ''} ${className}`}
      onClick={() => isLong && setExpanded(!expanded)}
      title={isLong && !expanded ? t('Click to expand') : undefined}
    >
      {visible.map(keyword => (
        <span
          key={keyword}
          className="rounded-full bg-bc-gray-100 px-2 py-0.5 text-xs text-bc-gray-500"
        >
          {keyword}
        </span>
      ))}
      {isLong && !expanded && (
        <span className="rounded-full bg-bc-gray-200 px-2 py-0.5 text-xs text-bc-gray-500 hover:bg-bc-gray-300 transition-colors">
          +{hiddenCount}
        </span>
      )}
    </div>
  )
}