import { Languages, Files, Download, Zap } from 'lucide-react'

export function Features() {
  const features = [
    {
      icon: Languages,
      title: "Multi-language Support",
      description: "Supports English, Bengali, Hindi, Arabic and more"
    },
    {
      icon: Files,
      title: "Multiple Formats",
      description: "Convert to DOCX, TXT, or RTF"
    },
    {
      icon: Download,
      title: "Easy Download",
      description: "Download converted files instantly"
    },
    {
      icon: Zap,
      title: "AI-Powered",
      description: "Utilize multiple AI APIs for enhanced accuracy"
    }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      {features.map((feature) => (
        <div
          key={feature.title}
          className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-200"
        >
          <feature.icon className="w-12 h-12 text-indigo-500 mb-4" />
          <h3 className="text-xl font-semibold text-gray-800 mb-2">
            {feature.title}
          </h3>
          <p className="text-gray-600">
            {feature.description}
          </p>
        </div>
      ))}
    </div>
  )
}