import { cx, css } from '@emotion/css';
import styles from './panel.module.scss'
import React from 'react'

// 定义panel组件的属性类型
export interface PanelProps {
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
    extra?: React.ReactNode;
    title?: string;
    noPadding?: boolean;
}

export const Panel: React.FC<PanelProps> = (props) => {
    return (
        <div className={styles.panel}>
            <div className={styles.panelHeader}>
                <h3 className={styles.panelTitle}>{props.title}</h3>
                {props.extra && <div className={styles.panelExtra}>{props.extra}</div>}
            </div>
            <div className={cx(styles.panelBody, props.noPadding ? styles.noPadding : '')}>{props.children}</div>
        </div>
    )
}