import React from 'react'

export interface KeywordsDisplayProps {
  keywords?: string[]
  isLoading: boolean
}

export const KeywordsDisplay: React.FC<KeywordsDisplayProps> = ({ keywords, isLoading }) => {
  if (!isLoading && (!keywords || keywords.length === 0)) {
    return null
  }

  if (isLoading) {
    return (
      <div className="space-y-2">
        <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
        <div className="flex flex-wrap gap-2">
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              data-testid="keyword-skeleton"
              className="rounded-full px-3 py-1 bg-gray-200 animate-pulse w-16 h-6"
            />
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-2">
      <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
      <div data-testid="keywords-container" className="flex flex-wrap">
        {keywords?.map((keyword, index) => (
          <span
            key={index}
            role="listitem"
            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 mr-2 mb-2"
          >
            {keyword}
          </span>
        ))}
      </div>
    </div>
  )
}