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

interface TrainerAssignmentEmailProps {
  clientName: string;
  trainerName: string;
}

export function TrainerAssignmentEmail({
  clientName,
  trainerName,
}: TrainerAssignmentEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>You've been assigned a trainer - {trainerName}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Great News! 🎯</Heading>
          <Text style={text}>Hi {clientName},</Text>
          <Text style={text}>
            You've been assigned a personal trainer to help you reach your
            fitness goals!
          </Text>
          <Section style={section}>
            <Heading style={h2}>Your Trainer</Heading>
            <Text style={highlightText}>{trainerName}</Text>
          </Section>
          <Text style={text}>
            Your trainer will work with you to:
            <br />
            • Create personalized workout plans
            <br />
            • Provide nutrition guidance
            <br />
            • Track your progress and achievements
            <br />• Adjust your program as you improve
          </Text>
          <Text style={text}>
            Check your FitAI mobile app to view your trainer's profile and start
            receiving personalized recommendations.
          </Text>
          <Text style={text}>
            Let's crush those goals together!
            <br />
            The FitAI Team
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// Default export for email previews
export default TrainerAssignmentEmail;

// 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: "10px 0",
  padding: "0",
};

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

const section = {
  padding: "20px 40px",
  backgroundColor: "#eff6ff",
  margin: "20px 0",
  borderLeft: "4px solid #3b82f6",
};

const highlightText = {
  color: "#3b82f6",
  fontSize: "24px",
  fontWeight: "bold",
  margin: "0",
  padding: "0",
};