import { 
  MessageSquare, 
  CheckSquare, 
  Star, 
  BarChart3, 
  Image, 
  Video,
  Code,
  Quote
} from 'lucide-react'

const components = [
  { type: 'quiz', name: 'Quiz', icon: CheckSquare, color: 'text-green-600' },
  { type: 'comment', name: 'Comments', icon: MessageSquare, color: 'text-blue-600' },
  { type: 'rating', name: 'Rating', icon: Star, color: 'text-yellow-600' },
  { type: 'progress', name: 'Progress Bar', icon: BarChart3, color: 'text-purple-600' },
  { type: 'image', name: 'Image Gallery', icon: Image, color: 'text-indigo-600' },
  { type: 'video', name: 'Video Player', icon: Video, color: 'text-red-600' },
  { type: 'code', name: 'Code Block', icon: Code, color: 'text-gray-600' },
  { type: 'quote', name: 'Quote Box', icon: Quote, color: 'text-orange-600' },
]

export default function ComponentLibrary({ onAddComponent }) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-6">
      <h2 className="text-xl font-semibold text-gray-900 mb-6">Interactive Components</h2>
      
      <div className="grid grid-cols-2 gap-4">
        {components.map((component) => {
          const Icon = component.icon
          return (
            <button
              key={component.type}
              onClick={() => onAddComponent(component.type)}
              className="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-all duration-200"
            >
              <Icon className={`h-8 w-8 ${component.color} mb-2`} />
              <span className="text-sm font-medium text-gray-700">{component.name}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}