import React from "react";
import {
  Card,
  CardContent,
  Typography,
  Alert,
  AlertTitle,
  Button,
  Grid,
} from "@mui/material";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import Price from "../../components/Price";

const CostWithdrawal: React.FC = () => {
  return (
    <>
      <PageHeader label="提现"></PageHeader>
      <PageLayout>
        <Alert severity="info" variant="filled">
          <AlertTitle>提现相关帮助</AlertTitle>
          <p>
            1. 原路提现（微信支付、支付宝）的款项预将计在2小时内退回您的账户。
          </p>
          <p>
            2. 原路提现（对公汇款）的款项预计将在 7~15
            个自然日内退回至您的账户。
          </p>
          <p>3. 其他问题请联系客服。</p>
        </Alert>
        <br />
        <Card>
          <CardContent>
            <Grid container alignItems="center" spacing={2}>
              <Grid item>
                <Typography>可提现金额</Typography>
              </Grid>
              <Grid item>
                <Typography>
                  <Price value={100} unit="元" />
                </Typography>
              </Grid>
              <Grid item>
                <Button variant="contained">提现</Button>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </PageLayout>
    </>
  );
};

export default CostWithdrawal;
