import { Button, Text } from "@react-email/components";
import { EmailLayout, buttonStyle, heading, linkFallback, paragraph } from "./_layout";

interface ResetPasswordEmailProps {
  url: string;
}

export function ResetPasswordEmail({ url }: ResetPasswordEmailProps) {
  return (
    <EmailLayout preview="Reset your Trovo password">
      <Text style={heading}>Reset your password</Text>
      <Text style={paragraph}>
        We received a request to reset the password on your Trovo account. Click the button below
        to choose a new one. This link expires in 1 hour.
      </Text>
      <Button href={url} style={buttonStyle}>
        Reset password
      </Button>
      <Text style={linkFallback}>Or paste this URL into your browser: {url}</Text>
      <Text style={paragraph}>
        If you didn&apos;t request a password reset, you can safely ignore this email — your
        password won&apos;t change.
      </Text>
    </EmailLayout>
  );
}

ResetPasswordEmail.PreviewProps = {
  url: "https://trovo.app/reset-password?token=preview",
} satisfies ResetPasswordEmailProps;

export default ResetPasswordEmail;