/**
 * title: "吸底按钮在内容区外（吸底按钮不包含在内容区域内）"
 * description: "通过设置onOk,onCancel属性，控制底部按钮的显示与隐藏"
 */
import React, { useState } from 'react';
import { Button } from '@alicloud/console-components';
import SlidePanel from '@alicloud/console-components-slide-panel';

const containerStyle = {
  height: '128px',
  borderRadius: '4px',
  lineHeight: '128px',
  background: '#f6f6f6',
  textAlign: 'center',
} as const;

export default () => {
  const [active, setActive] = useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setActive(true);
        }}
      >
        open
      </Button>
      <SlidePanel
        placement="right"
        title="标题 Title"
        isShowing={active}
        width="medium"
        onOk={() => {}}
        onCancel={() => {}}
        cancelText="基础按钮"
        okText="基础按钮"
        onVisibleChange={(v) => {
          setActive(v);
        }}
        onClose={() => {
          setActive(false);
        }}
      >
        <div style={containerStyle}>
          Content Placehoder
        </div>
      </SlidePanel>
    </>
  );
};