import React from 'react';
import { 
  Button, 
  Typography, 
  Paper, 
  Container,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';

interface LoginRequiredProps {
asset: string;
}
const LoginRequired = (props: LoginRequiredProps) => {
    const { asset } = props;
    const navigate = useNavigate();
    
    return (
<Container maxWidth="md">
        <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
          <Typography variant="h5" gutterBottom>
            Please log in to access {asset}
          </Typography>
          <Button variant="contained" onClick={() => { navigate('/login'); }} color="primary" sx={{ mt: 2 }}>
            Log In
          </Button>
        </Paper>
      </Container>
    );
};

export { LoginRequired };
