import { alpha } from '@mui/material'
import styled from '@emotion/styled'
import YaEmpty from '@/components/yaui/Empty'
import type { YaEmptyProps } from '@/components/yaui/Empty'
import type { Theme } from '@mui/material'

interface ContentWrapperProps {
  title?: string | React.ReactNode
  containerStyle?: React.CSSProperties
  // 控制 empty 样式
  isEmpty?: boolean
  emptyProps?: YaEmptyProps
  style?: React.CSSProperties
}

const StyledCardWrapper = styled('div')(({ theme }) => {
  const t = theme as Theme
  const mo = t.palette.mode
  return {
    padding: '.5rem .75rem',
    border: `1px solid ${t.palette.yacolor.boc[mo]}`,
    borderRadius: '6px',
    transition: 'border .3s ease',
    color: t.palette.primary[mo],
    boxShadow: `0 2px 11px 0 ${t.palette.yacolor.sdc[mo]}`,
    backgroundColor: alpha(t.palette.yacolor.bg[mo], 0.98),
    '& .header': {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      height: '26px',
      marginBottom: '.5rem',
      '& > .title': {
        display: 'inline-block',
        fontSize: '.85rem',
        fontWeight: 'bold',
      },
    },
  }
})

const ContentWrapper: React.FC<React.PropsWithChildren<ContentWrapperProps>> = (props) => {
  const { title, children, isEmpty, emptyProps = {}, containerStyle = {}, style = {} } = props
  return (
    <StyledCardWrapper style={style}>
      <header className="header">{title && <span className="title">{title}</span>}</header>
      {isEmpty && <YaEmpty {...emptyProps} />}
      {!isEmpty && <section style={{ ...containerStyle }}>{children}</section>}
    </StyledCardWrapper>
  )
}

export default ContentWrapper