import {
  Button,
  Container,
  Img,
  Section,
  Tailwind,
  Text,
} from "@react-email/components";
import * as React from "react";

const InviteUser = () => {
  return (
    <Tailwind>
      <Container className="bg-white my-auto mx-auto font-sans">
        <Container className="my-10 mx-auto p-5 w-[465px]">
          <Section className="mt-8">
            <Img
              src="https://feeddeck-emails.pages.dev/feeddeck.png"
              width="80"
              height="80"
              alt="Logo Example"
              className="my-0 mx-auto"
            />
          </Section>
          <Text className="text-sm">
            Hi {`{{ .Email }}`},
          </Text>
          <Text className="text-sm">
            Someone invited you to FeedDeck. To accept the invitation, click on
            the <strong>"Accept Invite"</strong> button below.
          </Text>
          <Section className="text-center mt-[32px] mb-[32px]">
            <Button
              pX={20}
              pY={12}
              className="bg-[#49d3b4] rounded text-[#1f2229] text-xs font-semibold no-underline text-center"
              href="{{ .SiteURL }}/confirmation?template=invite-user&confirmation_url={{ .ConfirmationURL }}"
            >
              Accept Invite
            </Button>
          </Section>
          <Text className="text-sm">
            Cheers,
            <br />
            The FeedDeck Team
          </Text>
        </Container>
      </Container>
    </Tailwind>
  );
};

export default InviteUser;
