import React, { useState } from "react"
import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
import { Card, Drawer, List } from "antd"

export const PlaygroundTeam = () => {
  // 模拟数据
  const data = [
    {
      title: "绿色化工工艺项目",
      description:
        "基于生物基原料，采用repeal2.0可降解材料技术，开发新型环保材料。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "智能农业解决方案",
      description: "利用物联网技术，实现精准农业管理，提高农作物产量。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "新能源汽车电池技术",
      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "碳捕集与封存技术",
      description: "开发高效的碳捕集技术，减少工业排放，助力碳中和目标。",
      demander: "奥赛康药业 供方：美国Propella公司"
    }
  ]

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "开发新型电池材料",
      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
      demander: "奥赛康药业 供方：美国Propella公司"
    })
  }

  const [open, setOpen] = useState(false)

  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }

  return (
    <div className="h-full overflow-y-hidden flex flex-col">
      {/* 数据导航 */}
      <DataNavigation
        Header={
          <div className="flex items-center text-[#15803d] gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
              viewBox="0 0 32 32"
              width="20"
              height="20">
              <defs></defs>
              <g>
                <path
                  fill="rgb(21, 128, 61)"
                  d="M16 18H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2M6 6v10h10V6zm20 6v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2m0 12v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2m-10 2v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"></path>
              </g>
            </svg>
            相关团队
          </div>
        }
        onClick={showDrawer}
      />

      {/* 场景列表 */}
      <div className="grid grid-cols-2 gap-3">
        {data.slice(0,2).map((item, index) => (
          <Card key={index} hoverable className="[&>*:first-child]:!p-3" >
            <div className="flex flex-col gap-0.5">
              <h3 className="text-sm font-medium text-gray-900 line-clamp-2">
                {item.title}
              </h3>
              <p className="flex items-center gap-1.5">
                <span className="inline-block bg-blue-100 text-green-800 text-xs px-2 py-1 rounded-full">
                  技 术 应
                </span>
                <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                  制 造
                </span>
              </p>
              <p className="text-xs text-gray-500 line-clamp-2">{item.description}</p>
            </div>
          </Card>
        ))}
      </div>

      {/* 抽屉 */}
      <Drawer
        title="相关团队"
        closable={{ "aria-label": "Close Button" }}
        onClose={onClose}
        open={open}
        width={600}>
        <List
          itemLayout="vertical"
          dataSource={data}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta
                title={
                  <h3 className="text-sm font-medium text-gray-900">
                    {item.title}
                  </h3>
                }
                description={
                  <div className="space-y-1">
                    <p className="flex items-center gap-1.5">
                      <span className="inline-block bg-blue-100 text-green-800 text-xs px-2 py-1 rounded-full">
                        技 术 应
                      </span>
                      <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                        制 造
                      </span>
                    </p>
                    <p className="text-xs text-gray-500">
                      {item.description}
                    </p>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  )
}