import * as React from "react";
import { Hr, Section, Text, Img } from "@react-email/components";
import { BaseLayout } from "./BaseLayout";

export interface ClientLayoutProps {
  preview: string;
  children: React.ReactNode;
  clientLogo?: string;
  clientName: string;
  brandColor?: string;
}

export const ClientLayout = ({
  preview,
  children,
  clientLogo,
  clientName,
  brandColor = "#82ed20",
}: ClientLayoutProps) => {
  return (
    <BaseLayout preview={preview} brandColor={brandColor}>
      <Section style={header}>
        {clientLogo ? (
          <Img src={clientLogo} alt={clientName} height="40" style={logo} />
        ) : (
          <Text style={logoText(brandColor)}>{clientName}</Text>
        )}
      </Section>
      <Hr style={hr} />
      <Section style={mainContent}>{children}</Section>
      <Hr style={hr} />
      <Section style={footer}>
        <Text style={footerText}>
          &copy; 2026 {clientName}. All rights reserved.
        </Text>
      </Section>
    </BaseLayout>
  );
};

const header = {
  marginBottom: "32px",
};

const logo = {
  margin: "0 auto",
  display: "block",
};

const logoText = (color: string) => ({
  margin: "0 auto",
  textAlign: "center" as const,
  fontSize: "24px",
  fontWeight: 900,
  color: "#ffffff",
  letterSpacing: "-0.02em",
  borderLeft: `4px solid ${color}`,
  paddingLeft: "12px",
});

const mainContent = {
  marginBottom: "32px",
};

const hr = {
  borderColor: "#222222",
  margin: "20px 0",
};

const footer = {
  marginTop: "32px",
  textAlign: "center" as const,
};

const footerText = {
  fontSize: "10px",
  color: "#333333",
  textTransform: "uppercase" as const,
  letterSpacing: "0.1em",
};