import React from "react";
import { Container, Heading, Section, Text, Hr, Button, Row, Column } from "@react-email/components";
import { User } from "@/server/modules/user/user.types";
import { config } from "@/config/env";

type Props = {
    user: User;
};

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

    return (
        <Container className="font-sans p-6 bg-white text-gray-900">
            <Heading className="text-2xl font-bold text-gray-800">
                Hej {user.name || "der"},
            </Heading>

            <Section className="mt-4 space-y-4">
                <Text className="text-base leading-relaxed">
                    Gode nyheder — dit abonnement er nu <b>aktivt</b>! 🎉
                </Text>

                <Text className="text-base leading-relaxed">
                    Du har nu fuld adgang til alle premiumfunktioner og kommende opdateringer.
                    Vi er glade for at have dig med ombord 🚀
                </Text>

                <Text className="text-base leading-relaxed">
                    Du kan til enhver tid administrere dit abonnement i dine kontoindstillinger.
                </Text>

                <div className="mt-6">
                    <Row>
                        <Column align="center">
                            <Button
                              className="bg-gray-800 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg"
                              href={`${config.app.url}/profile`}>
                                Gå til din profil
                            </Button>
                        </Column>
                    </Row>
                </div>
            </Section>

            <Hr className="my-8 border-gray-200" />

            <Text className="text-xs text-gray-500">
                Denne e-mail blev sendt til {user.email}.
                Hvis du ikke har anmodet om dette, kan du se bort fra beskeden.
            </Text>
        </Container>
    );
};