import classes from './MacFrameButtons.module.css';
import { cx } from '@/app/utils/style';
import { useWindowState } from '@/app/hooks/useWindowState';
import { useWindowFocus } from '@/app/hooks/useWindowFocus';
import { useWindowActions } from '@/app/hooks/useWindowActions';


export function MacFrameButtons() {
    const windowState = useWindowState();
    const focus = useWindowFocus();
    const {toggle, close, minimize} = useWindowActions();

    return (
        <>
            <div className={classes.traffic_lights}>
                <div onClick={close} className={cx(
                    classes.close_btn,
                    !focus && classes.disabled,
                    !windowState.isClosable && classes.disabled
                )}></div>
                <div onClick={minimize} className={cx(
                    classes.minimize_btn,
                    !focus && classes.disabled,
                    windowState.isMinimized && classes.disabled,
                    !windowState.isResizable && classes.disabled
                )}></div>
                <div onClick={toggle} className={cx(
                    classes.maximize_btn,
                    !focus && classes.disabled,
                    //windowState.isMaximized && classes.disabled,
                    (!windowState.isResizable && !windowState.isFullScreen) && classes.disabled
                )}></div>
            </div>
        </>     
    );
}