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

interface BaseLayoutProps {
  children: React.ReactNode;
  previewText: string;
  language: string;
  siteUrl: string;
}

const translations: Record<string, { footer: string; company: string }> = {
  sr: {
    footer: "ManoonOils - Prirodna kozmetika | www.manoonoils.com",
    company: "ManoonOils",
  },
  en: {
    footer: "ManoonOils - Natural Cosmetics | www.manoonoils.com",
    company: "ManoonOils",
  },
  de: {
    footer: "ManoonOils - Natürliche Kosmetik | www.manoonoils.com",
    company: "ManoonOils",
  },
  fr: {
    footer: "ManoonOils - Cosmétiques Naturels | www.manoonoils.com",
    company: "ManoonOils",
  },
};

export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
  const t = translations[language] || translations.en;

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.logoSection}>
            <Img
              src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
              width="150"
              height="auto"
              alt="ManoonOils"
              style={styles.logo}
            />
          </Section>
          {children}
          <Section style={styles.footer}>
            <Text style={styles.footerText}>{t.footer}</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: {
    backgroundColor: "#f6f6f6",
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
  },
  container: {
    backgroundColor: "#ffffff",
    margin: "0 auto",
    padding: "40px 20px",
    maxWidth: "600px",
  },
  logoSection: {
    textAlign: "center" as const,
    marginBottom: "30px",
  },
  logo: {
    margin: "0 auto",
  },
  footer: {
    marginTop: "40px",
    paddingTop: "20px",
    borderTop: "1px solid #e0e0e0",
  },
  footerText: {
    color: "#666666",
    fontSize: "12px",
    textAlign: "center" as const,
  },
};
