import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
  render,
} from "@react-email/components";
import React from "react";
import type { MailOption } from "../types";

export interface FailedLoginAttemptProps {
  email: string;
}

const logoURL = `https://cdn.karmagroup.com/Karma-Group-Logo-png.png`;

export const FailedLoginAttempt = ({
  email,
}: FailedLoginAttemptProps): React.ReactNode => (
  <Html>
    <Head />
    <Preview>Karma Subito - Failed Login Attempt</Preview>
    <Tailwind>
      <Body className="bg-white my-auto mx-auto font-sans px-2">
        <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
          <Section className="mt-[32px]">
            <Img
              src={logoURL}
              height="50"
              alt="Karma Logo"
              className="my-0 mx-auto"
            />
          </Section>
          <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
            Failed Login Attempt Notification
          </Heading>
          <Text className="text-black text-[14px] leading-[24px] px-5">
            A user attempted to log in unsuccessfully with the following email
            address:
          </Text>
          <Section className="bg-gray-100 my-5 p-3 text-center">
            <Text className="text-black text-[16px] leading-[24px]">
              {email}
            </Text>
          </Section>
          <Text className="text-black text-[14px] leading-[24px] px-5">
            This email is for notification purposes only. No action is required
            unless suspicious activity is suspected.
          </Text>
          <Section className="mt-5">
            <Text className="text-black text-[14px] leading-[24px] px-5">
              Best Regards,
              <br />
              The Karma Subito Team
            </Text>
          </Section>
          <Text className="text-[#666666] text-[12px] leading-[16px] text-center mt-5">
            Karma Group, {new Date().getFullYear()}
          </Text>
        </Container>
      </Body>
    </Tailwind>
  </Html>
);

export const sendFailedLoginAttemptMail = async (
  props: FailedLoginAttemptProps,
  opts: MailOption,
) => {
  const html = await render(<FailedLoginAttempt {...props} />);
  const subject = `Karma Subito - Email ${props.email} Tried unsuccessfully to login`;
  const mailOptions = {
    from: process.env.MAIL_USER!,
    to: opts.to,
    subject: subject,
    html: html,
  };
  return mailOptions;
};

export default FailedLoginAttempt;
