import {
  Html,
  Head,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Hr,
  Preview,
} from '@react-email/components';

interface SigningRequestEmailProps {
  documentName: string;
  signingUrl: string;
  expiryDate: string; // e.g. "March 25, 2026"
  clientName?: string;
}

export function SigningRequestEmail({
  documentName,
  signingUrl,
  expiryDate,
  clientName,
}: SigningRequestEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Please review and sign: {documentName}</Preview>
      <Body style={{ backgroundColor: '#ffffff', fontFamily: 'Georgia, serif' }}>
        <Container style={{ maxWidth: '560px', margin: '40px auto', padding: '0 20px' }}>
          <Heading style={{ color: '#1B2B4B', fontSize: '22px', marginBottom: '8px' }}>
            Teressa Copeland Homes
          </Heading>
          <Hr style={{ borderColor: '#C9A84C', marginBottom: '24px' }} />
          {clientName && (
            <Text style={{ color: '#333', fontSize: '16px' }}>Hello {clientName},</Text>
          )}
          <Text style={{ color: '#333', fontSize: '16px', lineHeight: '1.6' }}>
            You have a document ready for your review and signature:
          </Text>
          <Text
            style={{ color: '#1B2B4B', fontSize: '18px', fontWeight: 'bold', margin: '16px 0' }}
          >
            {documentName}
          </Text>
          <Text style={{ color: '#555', fontSize: '15px' }}>
            No account needed — just click the button below.
          </Text>
          <Button
            href={signingUrl}
            style={{
              backgroundColor: '#C9A84C',
              color: '#ffffff',
              padding: '14px 32px',
              borderRadius: '4px',
              fontSize: '16px',
              fontWeight: 'bold',
              textDecoration: 'none',
              display: 'inline-block',
              margin: '20px 0',
            }}
          >
            Review &amp; Sign
          </Button>
          <Text style={{ color: '#888', fontSize: '13px' }}>
            This link expires on {expiryDate}. If you did not expect this document, you can safely
            ignore this email.
          </Text>
          <Hr style={{ borderColor: '#e0e0e0', marginTop: '32px' }} />
          <Text style={{ color: '#aaa', fontSize: '12px' }}>
            Teressa Copeland Homes · Utah Licensed Real Estate Agent
          </Text>
        </Container>
      </Body>
    </Html>
  );
}
