import React from 'react';
import { MessageSquare, ImageIcon, Music, Video } from 'lucide-react';

const models = [
  {
    id: 'm1',
    name: '智能对话模型',
    desc: '强大的自然语言理解与生成能力',
    icon: MessageSquare,
    color: 'bg-blue-500',
    tag: '热门',
    tagColor: 'bg-green-100 text-green-600'
  },
  {
    id: 'm2',
    name: '图像生成模型',
    desc: '高质量图像生成，支持多种风格',
    icon: ImageIcon,
    color: 'bg-purple-500',
    tag: '新增',
    tagColor: 'bg-blue-100 text-blue-600'
  },
  {
    id: 'm3',
    name: '音乐创作模型',
    desc: 'AI作曲，支持多种音乐风格',
    icon: Music,
    color: 'bg-orange-500',
    tag: '热门',
    tagColor: 'bg-green-100 text-green-600'
  },
  {
    id: 'm4',
    name: '视频编辑模型',
    desc: '智能视频剪辑与特效生成',
    icon: Video,
    color: 'bg-emerald-500',
    tag: 'beta',
    tagColor: 'bg-purple-100 text-purple-600'
  }
];

const ModelRecommendations: React.FC = () => {
  return (
    <section>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold text-gray-900">推荐AI模型</h2>
        <button className="text-sm text-blue-600 hover:text-blue-700 font-medium flex items-center">
          探索更多 <span className="ml-1 text-xs">&gt;</span>
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {models.map((model) => (
          <div key={model.id} className="bg-white rounded-2xl border border-gray-50 overflow-hidden hover:shadow-lg transition-all flex flex-col group">
            <div className={`${model.color} h-32 flex items-center justify-center transition-transform group-hover:scale-105`}>
              <model.icon className="w-12 h-12 text-white/90" />
            </div>
            <div className="p-5 flex-1 flex flex-col">
              <h3 className="text-md font-bold text-gray-900 mb-1">{model.name}</h3>
              <p className="text-xs text-gray-400 mb-4 line-clamp-1">{model.desc}</p>
              
              <div className="mt-auto flex items-center justify-between">
                <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${model.tagColor}`}>
                  {model.tag}
                </span>
                <button className="text-xs text-blue-600 font-bold hover:underline">使用</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default ModelRecommendations;