import {
  Heading,
  Section,
  Text,
} from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Card } from './components/Card';
import { theme } from './theme';

interface AccountBannedEmailProps {
  userName?: string;
  reason?: string;
  appealLink?: string;
}

export const AccountBannedEmail = ({
  userName = 'Kirubel',
  reason = 'Violation of our Terms of Service',
  appealLink = 'https://amba.app/appeal',
}: AccountBannedEmailProps) => {
  return (
    <EmailLayout
      preview="Important: Your AmbaPay account has been suspended"
    >
      <Section>
        <Heading style={heading}>
          Account Suspended ⛔
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          We're writing to inform you that your AmbaPay account has been suspended due to a violation of our Terms of Service.
        </Text>
        <Card>
          <Section style={reasonSection}>
            <Text style={reasonTitle}>Reason for Suspension:</Text>
            <Text style={reasonText}>{reason}</Text>
          </Section>
        </Card>
        <Text style={text}>
          During this suspension, you will not be able to:
        </Text>
        <Section style={restrictionsList}>
          <Text style={restrictionItem}>• Access your account</Text>
          <Text style={restrictionItem}>• Make transactions</Text>
          <Text style={restrictionItem}>• Receive payments</Text>
          <Text style={restrictionItem}>• Use any AmbaPay services</Text>
        </Section>
        <Text style={text}>
          If you believe this suspension is a mistake, you have the right to appeal this decision. Please submit an appeal with any relevant information or documentation.
        </Text>
        <Section style={buttonSection}>
          <Text style={appealLink}>
            <a href={appealLink} style={linkStyle}>
              Submit an Appeal
            </a>
          </Text>
        </Section>
        <Text style={text}>
          Our team will review your appeal within 5-7 business days. You will receive an email notification once a decision has been made.
        </Text>
        <Text style={text}>
          If you have any questions, please contact our support team.
        </Text>
        <Text style={text}>
          Best regards,<br />
          The AmbaPay Team
        </Text>
      </Section>
    </EmailLayout>
  );
};

const heading = {
  color: theme.colors.primary,
  fontSize: '28px',
  fontWeight: '700',
  margin: '0 0 24px',
};

const text = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0 0 16px',
};

const reasonSection = {
  padding: '0',
};

const reasonTitle = {
  color: theme.colors.primary,
  fontSize: '18px',
  fontWeight: '600',
  margin: '0 0 8px',
};

const reasonText = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0',
};

const restrictionsList = {
  margin: '16px 0',
  paddingLeft: '20px',
};

const restrictionItem = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0 0 8px',
};

const buttonSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
};

const appealLink = {
  textAlign: 'center' as const,
  margin: '0',
};

const linkStyle = {
  color: theme.colors.primary,
  textDecoration: 'underline',
  fontSize: '16px',
  fontWeight: '600',
};

AccountBannedEmail.PreviewProps = {
  userName: 'Kirubel',
  reason: 'Violation of our Terms of Service',
  appealLink: 'https://amba.app/appeal',
} as AccountBannedEmailProps;

export default AccountBannedEmail;