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

interface RecommendationEmailProps {
  clientName: string;
  recommendationText: string;
}

export function RecommendationEmail({
  clientName,
  recommendationText,
}: RecommendationEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>New fitness recommendation from your trainer</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>New Recommendation! 📋</Heading>
          <Text style={text}>Hi {clientName},</Text>
          <Text style={text}>
            Your trainer has created a new personalized recommendation for you:
          </Text>
          <Section style={section}>
            <Text style={recommendationContent}>{recommendationText}</Text>
          </Section>
          <Text style={text}>
            Open your FitAI mobile app to view the complete recommendation
            including your activity plan and nutrition guidance.
          </Text>
          <Text style={text}>
            Keep up the great work!
            <br />
            The FitAI Team
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// Default export for email previews
export default RecommendationEmail;

// 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 text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
  padding: "0 40px",
  margin: "16px 0",
};

const section = {
  padding: "20px 40px",
  backgroundColor: "#f0fdf4",
  margin: "20px 0",
  borderLeft: "4px solid #10b981",
  borderRadius: "4px",
};

const recommendationContent = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
  margin: "0",
  padding: "0",
  fontStyle: "italic" as const,
};