import { Fragment, h } from 'vue'
import style from './style.module.scss'

import type { FunctionalComponent, VNode } from 'vue'

export const HeadPanl: FunctionalComponent = (_, ctx) =>
  h(
    'div',
    { class: style['header-panl'] },
    ctx.slots.default && ctx.slots.default()
  )

export const BodyPanlHeader: FunctionalComponent = (_, ctx) =>
  h(
    'div',
    { class: style['content-header'] },
    ctx.slots.default && ctx.slots.default()
  )
export const BodyPanlBody: FunctionalComponent = (_, ctx) =>
  h(
    'div',
    { class: style['content-body'] },
    ctx.slots.default && ctx.slots.default()
  )

export const BodyPanl: FunctionalComponent<{ title?: string }> = (
  props,
  ctx
) => {
  let header: VNode[] | VNode | undefined
  if (props.title || ctx.slots.header) {
    header = props.title
      ? h(BodyPanlHeader, null, () =>
          h(Fragment, null, [
            h('h3', null, props.title),
            ctx.slots.action && ctx.slots.action()
          ])
        )
      : ctx.slots.header && ctx.slots.header()
  }
  return h(
    'div',
    { class: style['content-panl'] },
    h(Fragment, null, [
      header,
      header
        ? h(BodyPanlBody, null, ctx.slots.default)
        : ctx.slots.default && ctx.slots.default()
    ])
  )
}
