import { FC } from "react"
import { useTranslation } from "react-i18next"
import CommentIcon from '@mui/icons-material/Comment';
import { applyItemStyle, nameStyle, titleContainerStyle } from "./style"
import { useTheme } from "@mui/material";

export const SuggestResourceCard: FC = () => {
  const { t } = useTranslation()
  const theme = useTheme()
  return (
    <div 
      css={applyItemStyle(theme)}
      onClick={() => {
        window.open(
          "https://www.act21.io/",
          "_blank",
        )
      }}
    >
   <CommentIcon fontSize="small"/>
      <div css={titleContainerStyle}>
        <div css={nameStyle(theme)}>{t("editor.action.form.option.tell_us")}</div>
      </div>
    </div>
  )
}

SuggestResourceCard.displayName = "SuggestResourceCard"
