import { FC } from "react"
import { useTranslation } from "react-i18next"
import { AddActionLabelProps } from "@/page/app/components/InspectPanel/PanelSetters/PublicComponent/Label/interface"
import { headerWrapperStyle } from "@/page/app/components/InspectPanel/PanelSetters/PublicComponent/Label/style"
import { PanelLabel } from "@/page/app/components/InspectPanel/components/Label"
import { Button } from "@mui/material"
// import AddIcon from '@mui/icons-material/Add';
// import { globalColor } from "@/utils/colorBuilder"

export const AddActionLabel: FC<AddActionLabelProps> = (props) => {
  const { labelName, labelDesc, handleAddItem } = props
  const { t } = useTranslation()

  return (
    <div css={headerWrapperStyle}>
      <PanelLabel labelName={labelName} labelDesc={labelDesc} />
      <Button
        sx={{padding:"1px 8px"}}
        // colorScheme="techPurple"
        size="small"
        variant="contained"
        onClick={handleAddItem}
        // leftIcon={
        //   <AddIcon sx={{color:globalColor(`techPurple-03`)}} />
        // }
      >
        {t("editor.inspect.setter_content.event_handler_list.new")}
      </Button>
    </div>
  )
}

AddActionLabel.displayName = "AddActionLabel"
