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

export default function CardExample() {
  const { Padding } = useClassNames();

  return (
    <div className="example-stage">
      <Card>
        <Card.Header>
          <h3>卡片头部</h3>
        </Card.Header>
        <Card.Body
          title="内容区标题"
          subtitle="(小标题)"
          operation={<Button type="link">操作区</Button>}
        >
          内容区
        </Card.Body>

        <Card.Footer>
          <p className={Padding["5n"]}>卡片底部</p>
        </Card.Footer>
      </Card>

      <Card>
        <Card.Body
          title="内容区标题"
          subtitle="(小标题)"
          operation={<Button type="link">操作区</Button>}
        >
          内容区
        </Card.Body>
      </Card>

      <Card>
        <Card.Body>内容区</Card.Body>
      </Card>
    </div>
  );
}