import { IProps } from "@/common/Iprops.interface";

import { AppContianer } from "@/layouts/AppContianer";
import { CheckIcon } from "@heroicons/react/solid";
import { useNavigate } from "react-router-dom";
import trangle from "@/assets/svg/trangle.svg";

interface ServiceType extends IProps {}

const ServiceList = () => {
  const navigate = useNavigate();
  const data = [
    {
      title: "BaaS试用版",
      text: "开通试用版后，您可以在一个月内免费试用开发版的产品功能。",
      price: 0,
      features: [
        "支持发布合约类，工具类，应用类等应用",
        "支持自动部署智能合约",
        "支持在线IDE，可以对EVM合约进行查看、编辑等",
        "提供存证服务安装包",
      ],
    },
    {
      title: "BaaS企业版",
      text: "支持中小企业联盟成员权重的可视化配置，助力企业轻松上链。",
      price: 5998,
      features: [
        "支持一键快速构建联盟链、平行侧链等区块链网络",
        "联盟链加平行链总数限制在3条",
        "联盟链节点最多支持5个",
      ],
    },
    {
      title: "BaaS开发版",
      text: "为团队提供完备的服务可视化操作，实现业务快速上链。",
      price: 7998,
      features: [
        "支持一键快速构建联盟链、平行侧链等区块链网络",
        "联盟链加平行链总数限制在6条",
        "联盟链节点最多支持7个",
      ],
    },
  ];
  const goDetails = (index: number) => {
    navigate("/details/" + index, {
      replace: true,
    });
  };
  return (
    <div className="grid grid-cols-3  w-full ">
      {data.map((i, index) => (
        <div
          key={index}
          onPointerDown={() => goDetails(index)}
          className="relative cursor-pointer w-[300px]  py-[40px] px-[40px] bg-white/40  h-[460px] rounded-[2.5rem] "
        >
          <div className="sub-title-cn border-black py-5">{i.title}</div>
          <div className="pt-2 des-cn">{i.text}</div>
          <ul className="py-5 des-cn font-bold">
            {i.features.map((k, x) => (
              <li className="my-1 flex" key={"child" + x}>
                <CheckIcon className="w-5 h-5 " />
                <div className="pl-3">{k}</div>
              </li>
            ))}
          </ul>
          <div className="w-full absolute bottom-10 px-10 left-0 flex justify-between align-bottom items-baseline">
            <div className="des-cn font-bold cursor-pointer flex items-center gap-x-3">
              <div>介绍详情</div>
              <img src={trangle} className="w-2" />
            </div>
            <div className="des-cn font-bold text-theme-blue">
              <span className=" int-font-1 ">{i.price}</span>
              <span>/年</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export const Service = (props: ServiceType) => {
  return (
    <AppContianer className="h-full w-full labtop:px-[120px] ">
      <div className=" flex relative w-full  h-full">
        <div className=" w-10/12 flex items-center h-full">
          <ServiceList />
        </div>
   
          <div className="flex w-2/12 pt-[46px] pl-[20px]">
            <div className="sub-title-cn verticalText">服务版本</div>
            <div className="hero-title verticalText">Service</div>
          </div>
       
      </div>
    </AppContianer>
  );
};
