import styled from "styled-components";
import { Button } from "../styles";
import type { UseSettings } from "../use/use-settings";
import { GRID } from "../interface";

const Wrapper = styled.div`
    height: calc(100% - 8px);
    border-right: 1px solid white;
    margin: 4px 0px;
    padding-right: 4px;
    width: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    button {
        flex-grow: 1;
    }
`;

export function PaperGuideSelector({ setSettings, settings }: UseSettings) {
    return (
        <Wrapper>
            {GRID.map((e, i) => (
                <Button
                    $active={e === settings.grid}
                    key={i}
                    onClick={() => {
                        setSettings({ grid: e });
                    }}
                >
                    {e}
                </Button>
            ))}
        </Wrapper>
    );
}