import { Container, Typography, Box, Button } from '@mui/material';
import { Add } from '@mui/icons-material';
import { IdeasTable } from './components/IdeasTable';
import { IdeasFilters } from './components/IdeasFilters';
import { CreateIdeaModal } from './components/CreateIdeaModal';
import { useIdeasStore } from './store/ideas';

function App() {
  const { setCreateModalOpen } = useIdeasStore();

  return (
    <Container maxWidth="xl" sx={{ py: 4 }}>
      <Box
        sx={{
          mb: 4,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Box>
          <Typography variant="h4" component="h1">
            Team Planner
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Управление бэклогом идей команды
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<Add />}
          onClick={() => setCreateModalOpen(true)}
        >
          Новая идея
        </Button>
      </Box>

      <Box sx={{ mb: 3 }}>
        <IdeasFilters />
      </Box>

      <IdeasTable />

      <CreateIdeaModal />
    </Container>
  );
}

export default App;