import { FC } from "react"
import { useTranslation } from "react-i18next"
// import { Empty } from "@illa-design/react"
import {ReactComponent as NoComponentSelected} from "@/assets/no-component-selected-icon.svg"
import {
  applyDescriptionStyle,
  unselectedTipIconStyle,
  unselectedTipTextStyle,
  unselectedTipWrapperStyle,
} from "./style"

export const EmptySelected: FC = () => {
  const { t } = useTranslation()
  return (
    <div css={unselectedTipWrapperStyle}>
    
          <div css={unselectedTipIconStyle}>
            <NoComponentSelected />
          </div>
      <div>
      <div css ={applyDescriptionStyle("10")}>Description</div>
            <div css={unselectedTipTextStyle}>
              {t("editor.inspect.unselected_tip1")}
            </div>
            <div css={unselectedTipTextStyle}>
              {t("editor.inspect.unselected_tip2")}
            </div>
          
      </div>
    </div>
  )
}

EmptySelected.displayName = "EmptySelected"
