import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
  Button,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
}

export function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to FitAI - Your fitness journey starts here!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome to FitAI! 💪</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            We're excited to have you join FitAI! Your account has been
            successfully created, and you're all set to begin your fitness
            journey.
          </Text>
          <Section style={section}>
            <Heading style={h2}>Getting Started</Heading>
            <Text style={text}>
              • Download the FitAI mobile app to track your workouts
              <br />
              • Complete your fitness profile for personalized recommendations
              <br />
              • Check in at the gym to start tracking your attendance
              <br />• Connect with your trainer for custom workout plans
            </Text>
          </Section>
          <Text style={text}>
            If you have any questions, feel free to reach out to your gym
            administrator or trainer.
          </Text>
          <Text style={text}>
            Let's make fitness a lifestyle!
            <br />
            The FitAI Team
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// Default export for email previews
export default WelcomeEmail;

// Styles
const main = {
  backgroundColor: "#f6f9fc",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "20px 0 48px",
  marginBottom: "64px",
  maxWidth: "600px",
};

const h1 = {
  color: "#333",
  fontSize: "28px",
  fontWeight: "bold",
  margin: "40px 0 20px",
  padding: "0 40px",
};

const h2 = {
  color: "#333",
  fontSize: "20px",
  fontWeight: "bold",
  margin: "20px 0 10px",
};

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
  padding: "0 40px",
};

const section = {
  padding: "20px 40px",
  backgroundColor: "#f8f9fa",
  margin: "20px 0",
};