import React from 'react';
import { Box, Button, Typography, Paper } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';

const TextViewer = ({ fileContent, fileName }) => {
  const downloadFile = () => {
    const blob = new Blob([JSON.stringify(fileContent, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">JSON Viewer</Typography>
      <Paper elevation={3} sx={{ p: 2, mt: 2, maxHeight: 400, overflow: 'auto', textAlign: 'left' }}>
        <pre>{JSON.stringify(fileContent, null, 2)}</pre>
      </Paper>
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        onClick={downloadFile}
        sx={{ mt: 2 }}
      >
        Download JSON
      </Button>
    </Box>
  );
};

export default TextViewer;