import React from 'react'
import { Link } from 'react-router-dom'
import { FolderOpen, Music, Zap, Sparkles, Database, LucideIcon } from 'lucide-react'

interface QuickAction {
  icon: LucideIcon
  label: string
  description: string
  path: string
}

const QuickActions: React.FC = () => {
  const quickActions: QuickAction[] = [
    { icon: Sparkles, label: 'AI 视频生成', description: '使用 AI 将图片转换为动态视频', path: '/ai-video' },
    { icon: Music, label: '音频处理', description: '处理音频文件，添加效果', path: '/audio' },
    { icon: Zap, label: 'AI 自动剪辑', description: '使用 AI 自动生成视频剪辑', path: '/editor' },
    { icon: FolderOpen, label: '导入媒体', description: '导入视频、音频和图片文件', path: '/media' },
    { icon: Database, label: 'KV 存储测试', description: '测试 Cloudflare KV 键值存储功能', path: '/kv-test' },
  ]

  return (
    <div>
      <h2 className="text-xl font-semibold text-secondary-900 mb-6">快速操作</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {quickActions.map((action, index) => {
          const IconComponent = action.icon
          return (
            <Link
              key={index}
              to={action.path}
              className="card p-6 hover:shadow-md transition-shadow group"
            >
              <div className="flex items-start space-x-4">
                <div className="p-3 bg-primary-100 rounded-lg group-hover:bg-primary-200 transition-colors">
                  <IconComponent className="text-primary-600" size={24} />
                </div>
                <div className="flex-1">
                  <h3 className="font-medium text-secondary-900 mb-1">{action.label}</h3>
                  <p className="text-sm text-secondary-600">{action.description}</p>
                </div>
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default QuickActions