import React, { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography, Card, CardContent, Button, Grid } from '@mui/material';

interface LogInNotificationCardProps {}

const LogInNotificationCard: React.FC<LogInNotificationCardProps> = ({}) => {
  const navigate = useNavigate();
  const goToLogin = async () => {
    navigate('/authentication/login');
  };
  return (
    <Card>
      <CardContent>
        <Typography variant="h6" gutterBottom>
          Want to know more?
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
          Sign in or create an account to view the seller disclosure document and message the owner
          with any questions.
        </Typography>
        <Button variant="contained" fullWidth onClick={goToLogin}>
          Log In
        </Button>
      </CardContent>
    </Card>
  );
};

export default LogInNotificationCard;
