import Image from 'next/image'

import { useParams } from 'common'
import { InlineLink } from 'components/ui/InlineLink'
import { BASE_PATH } from 'lib/constants'
import { useIsSecurityNotificationsEnabled } from './FeaturePreviewContext'

export const SecurityNotificationsPreview = () => {
  const { ref } = useParams()
  const isSecurityNotificationsEnabled = useIsSecurityNotificationsEnabled()

  return (
    <div className="text-sm text-foreground-light">
      <Image
        alt="Security notifications preview"
        src={`${BASE_PATH}/img/previews/security-notifications-preview.png`}
        width={1296}
        height={900}
        className="rounded border mb-4"
      />
      <div className="space-y-2 !mt-4">
        <p className=" mb-4">
          Try out our expanded set of{' '}
          <InlineLink
            href={`/project/${ref ?? '_'}/auth/${isSecurityNotificationsEnabled ? 'email' : 'templates'}`}
          >
            email templates
          </InlineLink>{' '}
          with support for security-related notifications.
        </p>
        <p className="text-foreground">Enabling this preview will:</p>
        <ul className="list-disc pl-6  space-y-1">
          <li>Add a dedicated sidebar section for contact methods like email and SMS</li>
          <li>Add new email templates for security-related notifications</li>
          <li>Move each (existing and new) template into its own dynamic route</li>
        </ul>
        <p>
          These changes are necessary to support incoming security-related notification templates.
          Given that the list of our email templates is doubling in size, this change requires some
          wider interface changes. Ones that we think make for a clearer experience overall. Win
          win!
        </p>
      </div>
    </div>
  )
}