import React from "react";
import { Text, Link, Heading, Hr } from "@react-email/components";

type Props = {
    user: {
        name?: string;
        email: string;
    };
    url: string;
};

export const ResetPasswordTemplate: React.FC<Props> = (props) => {
    const {
        user,
        url
    } = props;

    return (
        <>
            <Heading>
                Reset your <strong>Better Auth</strong> password
            </Heading>

            <Text>Hello {user.name || user.email},</Text>

            <Text>
                We received a request to reset your password for your Better Auth account. If you didn{"'"}t make this request, you can safely ignore this email.
            </Text>

            <Link href={url}>Reset password</Link>

            <Text>
                Or copy and paste this URL into your browser: <Link href={url}>{url}</Link>
            </Text>

            <Hr className="mt-[26px]" />

            <Text className="text-[#666666] text-[12px] leading-[24px] m-0">
                If you didn{"'"}t request a password reset, please ignore this email or contact support if you have concerns.
            </Text>
        </>
    );
};