import { CloseCircleOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useState, useEffect } from 'react'
export default function FilterPanel(props) {
    const { visible, title } = props;
    return visible ? <div style={{
        position: "absolute",
        top: 73,
        left: 292,
        width: 600,
        // height: 500,
        border: "1px solid #157DD0",
        background: "rgba(2,38,65,0.95)",
        zIndex: 10,
        pointerEvents: "auto"
    }}>
        <div className='layout-h center' style={{
            padding: 12,
            background: "#165CAC99",
            // opacity: 0.5
        }}>
            <div className='fill w0' style={{
                fontSize: 18
            }}>{title}</div>
            <Button onClick={e => {
                props.onCancel?.()
            }} type="text" icon={<CloseCircleOutlined />} shape='circle'></Button>
        </div>
        <div className='' style={{
            padding: 24
        }}>
            {props.children}
        </div>
    </div> : null;
}