import type { I18nKeysWithPrefix } from '@/types/i18n'
import { cn } from '@langgenius/dify-ui/cn'
import { RiLock2Fill } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Link from '@/next/link'

type EncryptedKey = I18nKeysWithPrefix<'common', 'provider.encrypted.'>

type Props = Readonly<{
  className?: string
  frontTextKey?: EncryptedKey
  backTextKey?: EncryptedKey
}>

const DEFAULT_FRONT_KEY: EncryptedKey = 'provider.encrypted.front'
const DEFAULT_BACK_KEY: EncryptedKey = 'provider.encrypted.back'

export const EncryptedBottom = (props: Props) => {
  const { t } = useTranslation()
  const { frontTextKey = DEFAULT_FRONT_KEY, backTextKey = DEFAULT_BACK_KEY, className } = props

  return (
    <div
      className={cn(
        'flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary',
        className,
      )}
    >
      <RiLock2Fill className="mx-1 size-3 text-text-quaternary" />
      {t(($) => $[frontTextKey], { ns: 'common' })}
      <Link
        className="mx-1 text-text-accent"
        target="_blank"
        rel="noopener noreferrer"
        href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
      >
        PKCS1_OAEP
      </Link>
      {t(($) => $[backTextKey], { ns: 'common' })}
    </div>
  )
}