import * as React from "react"
import { Button, Heading, Hr, Section, Text } from "@react-email/components"

import { RavenEmailLayout } from "./_components/layout"
import { EMAIL_COLORS } from "./_components/tokens"

export type PasswordResetEmailProps = {
  resetUrl: string
  expiresIn?: string
}

export default function PasswordResetEmail(props: PasswordResetEmailProps) {
  const { resetUrl, expiresIn = "1 hora" } = props

  return (
    <RavenEmailLayout title="Redefinicao de senha" preview="Voce solicitou a redefinicao de sua senha">
      <Section style={{ textAlign: "center", margin: "24px 0" }}>
        <div
          style={{
            display: "inline-block",
            width: "64px",
            height: "64px",
            backgroundColor: "#fef3c7",
            borderRadius: "50%",
            lineHeight: "64px",
            fontSize: "28px",
            border: "1px solid #f59e0b",
          }}
        >
          &#128274;
        </div>
      </Section>

      <Heading style={{ margin: "0 0 12px 0", fontSize: "26px", fontWeight: 700, color: EMAIL_COLORS.textPrimary, textAlign: "center" }}>
        Redefinir senha
      </Heading>

      <Text style={{ margin: "0 0 24px 0", fontSize: "15px", lineHeight: "1.7", color: EMAIL_COLORS.textSecondary, textAlign: "center" }}>
        Recebemos uma solicitacao para redefinir a senha da sua conta. Clique no botao abaixo para criar uma nova senha.
      </Text>

      <Section style={{ textAlign: "center", margin: "32px 0" }}>
        <Button
          href={resetUrl}
          style={{
            display: "inline-block",
            backgroundColor: EMAIL_COLORS.primary,
            color: EMAIL_COLORS.primaryForeground,
            textDecoration: "none",
            borderRadius: "12px",
            padding: "14px 24px",
            fontWeight: 800,
            fontSize: "14px",
            border: `1px solid ${EMAIL_COLORS.primaryDark}`,
          }}
        >
          Redefinir senha
        </Button>
      </Section>

      <Hr style={{ borderColor: EMAIL_COLORS.border, margin: "24px 0" }} />

      <Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
        Se o botao nao funcionar, copie e cole esta URL no navegador:
        <br />
        <a href={resetUrl} style={{ color: EMAIL_COLORS.primaryDark, textDecoration: "none" }}>
          {resetUrl}
        </a>
      </Text>

      <Text style={{ margin: "24px 0 0 0", fontSize: "13px", color: EMAIL_COLORS.textMuted, textAlign: "center", lineHeight: "1.6" }}>
        Este link expira em {expiresIn}. Se voce nao solicitou esta redefinicao, pode ignorar este e-mail com seguranca.
      </Text>
    </RavenEmailLayout>
  )
}

PasswordResetEmail.PreviewProps = {
  resetUrl: "https://raven.rever.com.br/redefinir-senha?token=abc123def456",
  expiresIn: "1 hora",
} satisfies PasswordResetEmailProps