import { forwardRef, useContext } from "react"
import { TFootProps } from "./interface"
import { css } from "@emotion/react"
import { TableContext } from "./table-context"
import { applyBoxStyle, deleteCssProps } from "../model/src"
import { useTheme } from "@mui/material"


export const TFoot = forwardRef<HTMLTableSectionElement, TFootProps>(
  (props, ref) => {
    const { ...otherProps } = props
    const theme = useTheme()
    const tableContext = useContext(TableContext)
    return tableContext?.showFooter ? (
      <tfoot
        css={css(applyBoxStyle(props,theme))}
        ref={ref}
        {...deleteCssProps(otherProps)}
      />
    ) : null
  },
)

TFoot.displayName = "TFoot"
