import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Settings, Layout, User, Home } from 'lucide-react';

const features = [
  { label: '模型广场', desc: '浏览和选择云端大模型', icon: Box, color: 'bg-blue-50 text-blue-600', path: '/models' },
  { label: '开放平台', desc: '获取 API 密钥和文档', icon: Settings, color: 'bg-indigo-50 text-indigo-600', path: '/platform' },
  { label: '私有模型', desc: '部署您的专属私有化模型', icon: Layout, color: 'bg-emerald-50 text-emerald-600', path: '/models' },
  { label: '个人中心', desc: '管理账户和偏好设置', icon: User, color: 'bg-purple-50 text-purple-600', path: '/profile' },
  { label: '返回首页', desc: '回到平台首页', icon: Home, color: 'bg-amber-50 text-amber-600', path: '/' },
];

const QuickAccess: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
      {features.map((f, i) => (
        <div
          key={i}
          onClick={() => navigate(f.path)}
          className="bg-white p-5 rounded-2xl border border-gray-100 flex flex-col items-center text-center hover:shadow-md transition-all cursor-pointer group"
        >
          <div className={`w-12 h-12 ${f.color} rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
            <f.icon className="w-6 h-6" />
          </div>
          <h3 className="text-sm font-bold text-gray-900 mb-1">{f.label}</h3>
          <p className="text-[10px] text-gray-400 leading-tight">{f.desc}</p>
        </div>
      ))}
    </div>
  );
};

export default QuickAccess;