import React from 'react';

const SuccessIcon = () => {
  return (<svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-full h-full text-green-500">
    <path
      d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>)
}

const LoadingIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
      viewBox="0 0 24 24"
      width="18"
      height="18">
      <defs></defs>
      <g>
        <path
          fill="rgb(59, 130, 246)"
          d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92c-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93c-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37l-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63M12.5 7v5.25l4.5 2.67l-.75 1.23L11 13V7z"></path>
      </g>
    </svg>
  )
}


export const PlaygroundIodRelevant: React.FC = () => {
  const data = [
    {
      title: "已在29个科学数据中心的50万个科学数据集中进行搜索",
      description: "已发现4个数据集",
      status: "success"
    },
    {
      title: "已在100万篇论文、2800个科创场景中进行搜索",
      description: "已发现4个数据集",
      status: "success"
    },
    {
      title: "正在1000位智库专家、12万个创新机构中进行搜索",
      status: "loading"
    },
  ]

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "已在29个科学数据中心的50万个科学数据集中进行搜索" + i,
      description: "已发现4个数据集",
      status: "success"
    })
  }


  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold text-gray-900">
          数联网搜索相关内
        </h2>
        <span className="text-sm text-blue-600 font-medium">{data.length}个结果</span>
      </div>

      {/* Content */}
      <div className="space-y-3 flex-1 overflow-y-auto">
        {
          data.map((item, index) => (
            <div className="flex items-start space-x-3">
              <div className="w-5 h-5 mt-1 flex-shrink-0">
                {item.status === "success" ? <SuccessIcon /> : <LoadingIcon />}
              </div>
              <div className="flex-1">
                <p className="text-sm text-gray-700">
                  {item.title}
                </p>
                {item.description && <p className="text-xs text-gray-500 mt-1">{item.description}</p>}
              </div>
            </div>
          ))
        }
      </div>
    </div>
  )
}