import { MainButton } from "./mainButton";
import styled from "styled-components";
import { buttonNames } from "../../../const/buttons/names";
import { IconComponent as Icon } from '../../../const/buttons/icons';
import { useWorkSpaceStore } from "../../../store";

type Props = {
    size: "small" | "big";
};

const Container = styled.div<{ size: "small" | "big" }>`
    ${(props) => props.size === "small" && "width: 100%;"}
`;

const Button = styled.div`
    width: 100%;
    cursor: pointer;
    color: ${(props) => props.theme.textColor};
`;

const IconContainer = styled.div`
    padding: 10px;
`;

export const QuitButton = ({ size }: Props) => {
    const handleExit = () => {
        window.electron.quitApp();
    };

    const { setWorkModule } = useWorkSpaceStore()

    return (
        <Container size={size} onClick={()=>setWorkModule('helloWindow')}>
            {size === "big" ? (
                <MainButton title="Выйти" size="big" />
            ) : (
                <Button>
                    <IconContainer>
                        <Icon name={buttonNames[12]} width="30" height="30"/>
                    </IconContainer>
                </Button>
            )}
        </Container>
    );
};