"use client";
import React from "react";
import {
  Button,
  Card,
  Col,
  Dropdown,
  Row,
  Space,
  Table,
  Tabs,
  type TabsProps,
  Tag,
  Typography,
} from "antd";
import { CalculatorOutlined, MoreOutlined } from "@ant-design/icons";
import Link from "antd/lib/typography/Link";
import MyStake from "@/app/home/resources2/components/MyStake";

const { Text } = Typography;

const OtherAccounts = () => {
  const columns_key1 = [
    {
      title: "资源类型",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "获取资源数量",
      dataIndex: "quantity",
      key: "quantity",
    },
    {
      title: "质押数量",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "最后操作时间 (UTC)",
      dataIndex: "quantity",
      key: "quantity",
    },
    {
      title: "操作",
      render: () => {
        return (
          <Dropdown menu={{ items }}>
            <MoreOutlined />
          </Dropdown>
        );
      },
    },
  ];

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "质押获得",
      children: <Table dataSource={[]} columns={columns_key1} />,
    },
    {
      key: "2",
      label: "他人代理给自己",
      children: <Table dataSource={[]} columns={columns_key1} />,
    },
    {
      key: "3",
      label: "代理给他人",
      children: <Table dataSource={[]} columns={columns_key1} />,
    },
  ];

  return (
    <Space direction={"vertical"} size={[16, 16]} style={{ width: "100%" }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          backgroundColor: "white",
          padding: 16,
        }}
      >
        <Text strong>管理其他账户权限</Text>
      </div>
      <Card
        style={{ backgroundColor: "#fffbf6" }}
        title={
          <Space direction={"vertical"}>
            <Text strong>持有“拥有者权限”</Text>
            <Text>
              你持有以下其他账户的最高权限，可以调整账户的权限结构、执行所有操作。
            </Text>
          </Space>
        }
      >
        <Table dataSource={[]} columns={columns_key1} />
      </Card>
      <Card
        style={{ backgroundColor: "#fffbf6" }}
        title={
          <Space direction={"vertical"}>
            <Text strong>持有“活跃权限”</Text>
            <Text>你持有以下其他账户的活跃权限，可以执行被授权的操作。</Text>
          </Space>
        }
      >
        <Table dataSource={[]} columns={columns_key1} />
      </Card>
    </Space>
  );
};

export default OtherAccounts;