import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FiUser } from 'react-icons/fi';

const LoginRequired = ({
  title = '需要登录访问',
  description = '该功能需要登录后才能使用，请先登录您的账户。',
  icon = '🔒',
}) => {
  const navigate = useNavigate();

  return (
    <div className="bg-white absolute inset-0 min-h-screen flex flex-col justify-center items-center text-center px-10 py-[60px]">
      <div>
        <div className="text-[64px] mb-6">{icon}</div>
        <h2 className="text-2xl font-bold text-[#2e7d32] mb-4">{title}</h2>
        <p className="text-gray-500 text-base leading-relaxed mb-6">{description}</p>
        <button
          onClick={() => navigate('/login')}
          className={[
            'bg-gradient-to-br from-[#81c784] to-[#a5d6a7] text-white border-none',
            'px-8 py-3.5 rounded-2xl text-base font-semibold cursor-pointer',
            'transition-all duration-300 inline-flex items-center gap-2',
            'shadow-[0_4px_16px_rgba(129,199,132,0.3)]',
            'hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(129,199,132,0.4)]',
          ].join(' ')}
        >
          <FiUser />
          立即登录
        </button>
      </div>
    </div>
  );
};

export default LoginRequired;
