import React from "react";
import { Card, Progress, Row, Space, Tooltip, Typography } from "antd";
import { AppstoreOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import Link from "antd/lib/typography/Link";

const { Title } = Typography;

const VoteCard: React.FC = () => {
  return (
    <Card
      title={
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div>
            <AppstoreOutlined /> 我的投票
          </div>
          <Link>去投票</Link>
        </div>
      }
      hoverable
    >
      <Row justify="space-between">
        <div>
          投票权
          <Tooltip
            title={
              "投票权 (TP) 用来给 TRON SR 投票,用户可以通过质押 TRX 来获得投票权。"
            }
          >
            <QuestionCircleOutlined />
          </Tooltip>
        </div>
        <div>0.0</div>
      </Row>
      <Progress percent={30} size="small" />
      <Row justify="space-between">
        <div>投票权APY</div>
        <div>0.0%</div>
      </Row>
      <Row justify="space-between">
        <div>投票权奖励</div>
        <div>0TRX</div>
      </Row>
      <Space>
        <button>获取投票权</button>
        <button>领取奖励</button>
      </Space>
    </Card>
  );
};

export default VoteCard;