import { Result, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import { RocketOutlined } from '@ant-design/icons'

interface PlaceholderProps {
  title?: string
  description?: string
  message?: string  // 别名，等同于description
  moduleName?: string
}

const Placeholder = ({ 
  title = '功能开发中', 
  description = '该模块正在规划和开发中，敬请期待',
  message,  // message是description的别名
  moduleName 
}: PlaceholderProps) => {
  // 优先使用message，如果没有则使用description
  const displayDescription = message || description;
  const navigate = useNavigate()

  return (
    <div className="flex-1 flex items-center justify-center bg-gray-50">
      <Result
        icon={<RocketOutlined style={{ fontSize: 72, color: '#1890ff' }} />}
        title={<span className="text-2xl">{title}</span>}
        subTitle={
          <div className="space-y-2">
            <p className="text-gray-600">{displayDescription}</p>
            {moduleName && (
              <p className="text-sm text-gray-400">
                模块名称：{moduleName}
              </p>
            )}
          </div>
        }
        extra={
          <Button type="primary" onClick={() => navigate('/')}>
            返回首页
          </Button>
        }
      />
    </div>
  )
}

export default Placeholder