import { useAtomValue } from 'jotai'
import { memo } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import Divider from '@/app/components/base/divider'
import { userProfileEmailAtom } from '@/context/account-state'

type TipsProps = {
  showEmailTip: boolean
  isEmailDebugMode: boolean
  showDebugModeTip: boolean
}

const Tips = ({ showEmailTip, isEmailDebugMode, showDebugModeTip }: TipsProps) => {
  const { t } = useTranslation()
  const email = useAtomValue(userProfileEmailAtom)

  return (
    <>
      <Divider className="my-2! w-[30px]" />
      <div className="space-y-1 pt-1" data-testid="tips">
        {showEmailTip && !isEmailDebugMode && (
          <div className="system-xs-regular text-text-secondary">
            {t(($) => $['common.humanInputEmailTip'], { ns: 'workflow' })}
          </div>
        )}
        {showEmailTip && isEmailDebugMode && (
          <div className="system-xs-regular text-text-secondary">
            <Trans
              i18nKey={($) => $['common.humanInputEmailTipInDebugMode']}
              ns="workflow"
              components={{ email: <span className="system-xs-semibold"></span> }}
              values={{ email }}
            />
          </div>
        )}
        {showDebugModeTip && (
          <div className="system-xs-medium text-text-warning">
            {t(($) => $['common.humanInputWebappTip'], { ns: 'workflow' })}
          </div>
        )}
      </div>
    </>
  )
}

export default memo(Tips)
