import React from "react";
import {
    List,
    ListItem,
    ListItemText,
    styled
} from "@mui/material";

const FooterList = styled(List)(({ theme }) => ({
    backgroundColor: theme.palette.custom.sidebar,
    padding: theme.spacing(1, 0),
    borderTop: `1px solid ${theme.palette.divider}`,
    marginTop: 'auto'
}));

const FooterListItem = styled(ListItem)(({ theme }) => ({
    '&:hover': {
        backgroundColor: theme.palette.custom.sidebarHover,
    },
    padding: theme.spacing(1, 2),
}));

const SidebarFooter = () => {
    return (
        <FooterList>
            <FooterListItem button>
                <ListItemText
                    primary="Помощь"
                    primaryTypographyProps={{
                        color: 'custom.sidebarText',
                        variant: 'body2'
                    }}
                />
            </FooterListItem>
            <FooterListItem button>
                <ListItemText
                    primary="Настройка"
                    primaryTypographyProps={{
                        color: 'custom.sidebarText',
                        variant: 'body2'
                    }}
                />
            </FooterListItem>
        </FooterList>
    );
};

export default SidebarFooter;