/**
 * 使用性界面的空状态组件（带引导按钮）
 * 当缺少配置时，引导用户前往对应的配置页面
 */
import React from "react";
import { useNavigate } from "react-router-dom";
import type { LucideIcon } from "lucide-react";

interface EmptyStateWithGuideProps {
  /** 标题 */
  title: string;
  /** 描述文字 */
  description: string;
  /** 引导按钮文字 */
  buttonText: string;
  /** 引导目标路径 */
  targetPath: string;
  /** 图标组件 */
  Icon: LucideIcon;
}

export const EmptyStateWithGuide: React.FC<EmptyStateWithGuideProps> = ({
  title,
  description,
  buttonText,
  targetPath,
  Icon,
}) => {
  const navigate = useNavigate();

  return (
    <div className="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-6">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-yellow-300 mb-2">{title}</h3>
          <p className="text-yellow-200 mb-4">{description}</p>
          <button
            onClick={() => navigate(targetPath)}
            className="inline-flex items-center gap-2 px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg transition"
          >
            <Icon className="w-4 h-4" />
            {buttonText}
          </button>
        </div>
      </div>
    </div>
  );
};

