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

interface KycVerificationEmailProps {
  userName?: string;
  deadline?: string;
}

export const KycVerificationEmail = ({
  userName = 'Kirubel',
  deadline = '7 days',
}: KycVerificationEmailProps) => {
  return (
    <EmailLayout
      preview="Action Required: Complete your KYC verification to continue using AmbaPay"
    >
      <Section>
        <Heading style={heading}>
          Verify Your Identity ⚠️
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          To continue using AmbaPay and access all our services, we need to verify your identity as part of our Know Your Customer (KYC) process. This is a standard security requirement to protect your account and comply with regulations.
        </Text>
        <Card>
          <Section style={infoSection}>
            <Text style={infoTitle}>Required Documents:</Text>
            <Text style={infoItem}>• Government-issued ID (passport, driver's license, or national ID)</Text>
            <Text style={infoItem}>• Proof of address (utility bill, bank statement, etc.)</Text>
            <Text style={infoItem}>• Selfie with your ID</Text>
          </Section>
        </Card>
        <Text style={text}>
          <strong>Deadline: Complete verification within {deadline}</strong>
        </Text>
        <Text style={text}>
          Please complete your KYC verification to avoid any service interruptions. The process is quick and secure, taking just a few minutes.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/kyc">
            Complete KYC Verification
          </Button>
        </Section>
        <Text style={text}>
          If you have any questions or need assistance, please contact our support team. We're here to help!
        </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 infoSection = {
  padding: '0',
};

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

const infoItem = {
  color: theme.colors.textDark,
  fontSize: '14px',
  lineHeight: '22px',
  margin: '0 0 8px',
  paddingLeft: '4px',
};

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

KycVerificationEmail.PreviewProps = {
  userName: 'Kirubel',
  deadline: '7 days',
} as KycVerificationEmailProps;

export default KycVerificationEmail;