import React, { useState } from 'react'
import { Button, Container, Box, Typography } from '@mui/material'
import Feedback from '../components/Feedback'

function MainPage() {
  const [feedbackOpen, setFeedbackOpen] = useState(false);

  const handleOpenFeedback = () => {
    setFeedbackOpen(true);
  };

  const handleCloseFeedback = () => {
    setFeedbackOpen(false);
  };

  return (
    <Container maxWidth="xl">
      <Box sx={{ mt: 4, textAlign: 'center' }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Главная страница
        </Typography>
        <Typography variant="body1" paragraph>
          Это главная страница приложения
        </Typography>
        
        <Button 
          variant="contained" 
          onClick={handleOpenFeedback}
          sx={{ 
            bgcolor: '#c22d1a', 
            color: 'white', 
            py: 1.5, 
            px: 3,
            '&:hover': { bgcolor: '#a42517' } 
          }}
        >
          Оставить заявку
        </Button>
      </Box>
      
      <Feedback open={feedbackOpen} onClose={handleCloseFeedback} />
    </Container>
  )
}

export default MainPage