maternal-app/maternal-web/components/legal/LegalDocumentViewer.tsx

'use client';

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  IconButton,
} from '@mui/material';
import { Close } from '@mui/icons-material';
import { TermsContent } from './TermsContent';
import { PrivacyContent } from './PrivacyContent';
import { EULAContent } from './EULAContent';

interface LegalDocumentViewerProps {
  open: boolean;
  onClose: () => void;
  documentType: 'terms' | 'privacy' | 'eula' | 'cookies';
  title: string;
}

export function LegalDocumentViewer({ open, onClose, documentType, title }: LegalDocumentViewerProps) {
  const lastUpdated = 'October 4, 2025';

  const getContent = () => {
    switch (documentType) {
      case 'terms':
        return <TermsContent />;
      case 'privacy':
        return <PrivacyContent />;
      case 'eula':
        return <EULAContent />;
      default:
        return (
          <Typography color="error">
            Document content not available. Please visit the{' '}
            <a href={`/legal/${documentType}`} target="_blank" rel="noopener">
              full page
            </a>
            .
          </Typography>
        );
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
      sx={{
        zIndex: (theme) => theme.zIndex.modal + 1, // Ensure this dialog appears above the EULA dialog
      }}
    >
      <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Typography variant="h6">{title}</Typography>
        <IconButton onClick={onClose} size="small" aria-label="close">
          <Close />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers sx={{ maxHeight: '60vh', overflowY: 'auto' }}>
        <Typography variant="body2" color="text.secondary" paragraph>
          Last Updated: {lastUpdated}
        </Typography>
        {getContent()}
      </DialogContent>

      <DialogActions sx={{ p: 2 }}>
        <Button onClick={onClose} variant="contained" color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}