import { FC } from "react"
import { AdvancedPanelControlProps } from "./interface"
import {
  applyControllerContainerStyle,
  controlTitleStyle,
  controlWrapperStyle,
  notAllowedMask,
  subtitleStyle,
} from "./style"
import { useTheme } from "@mui/material"

export const AdvancedPanelControl: FC<AdvancedPanelControlProps> = (props) => {
  const { title, children, disabled, subtitle } = props
  const theme = useTheme()
  return (
    <div css={applyControllerContainerStyle(disabled)}>
      <h6 css={controlTitleStyle(theme)}>{title}</h6>
      <div css={controlWrapperStyle}>
        {children}
        {subtitle && <span css={subtitleStyle(theme)}>{subtitle}</span>}
        {disabled && <div css={notAllowedMask} />}
      </div>
    </div>
  )
}
