import { useTranslation } from "react-i18next"

import  NoComponentSelected from "@/assets/no-component-selected-icon.svg"
import {
  applyDescriptionStyle,
  unselectedTipIconStyle,
  unselectedTipTextStyle,
  unselectedTipWrapperStyle,
} from "./style"

export const EmptySelected = (props:{tip1?:string,tip2?:string}) => {
  const {tip1,tip2} = props;
  const { t } = useTranslation()
  return (
    <div css={unselectedTipWrapperStyle}>
    
          <div css={unselectedTipIconStyle}>
            <NoComponentSelected />
          </div>
      <div>
      <div css ={applyDescriptionStyle("10")}>Description</div>
            <div css={unselectedTipTextStyle}>
              {tip1||t("editor.inspect.unselected_tip1")}
            </div>
            <div css={unselectedTipTextStyle}>
              {tip2||t("editor.inspect.unselected_tip2")}
            </div>
          
      </div>
    </div>
  )
}

EmptySelected.displayName = "EmptySelected"
