import React, { useState } from "react";
import {
  Card,
  Button,
  Switch,
  useClassNames,
  H3,
} from "@tencent/tea-component";

export default function CardExample() {
  const [headerVisible, setHeaderVisible] = useState(false);
  const [footerVisible, setFooterVisible] = useState(false);
  const [borderVisible, setBorderVisible] = useState(false);
  const { Padding } = useClassNames();

  return (
    <>
      <section>
        <Switch
          value={headerVisible}
          onChange={value => setHeaderVisible(value)}
        >
          显示头部
        </Switch>
        <Switch
          value={footerVisible}
          onChange={value => setFooterVisible(value)}
        >
          显示底部
        </Switch>
        <Switch
          value={borderVisible}
          onChange={value => setBorderVisible(value)}
        >
          显示边框
        </Switch>
      </section>
      <div className="example-stage">
        <Card bordered={borderVisible}>
          {headerVisible && (
            <Card.Header>
              <H3>卡片头部</H3>
            </Card.Header>
          )}
          <Card.Body
            title="内容区标题"
            subtitle="(小标题)"
            operation={<Button type="link">操作区</Button>}
          >
            内容区
          </Card.Body>
          {footerVisible && (
            <Card.Footer>
              <p className={Padding["5n"]}>卡片底部</p>
            </Card.Footer>
          )}
        </Card>
      </div>
    </>
  );
}