import { IconButton } from "@mui/material";
import LeftIcon from "@mui/icons-material/ChevronLeft";
import RightIcon from "@mui/icons-material/ChevronRight";
import { CSSProperties } from "react";
export interface YearInputProps {
    year: number;
    setYear: (year: number) => void;
    style?: CSSProperties;
}

export default function YearInput(props: YearInputProps): React.ReactElement {
    const { year, setYear, style = {} } = props;
    return (
        <>
            <div
                style={{
                    ...{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        backgroundColor: "var(--wine-dark)",
                        borderRadius: "6px",
                        color: "var(--white)",
                    },
                    ...style,
                }}
            >
                <IconButton onClick={() => setYear(year - 1)}>
                    <LeftIcon sx={{ width: 36, height: 36, fontSize: 24, color: "var(--white)" }} />
                </IconButton>
                <span>{year}</span>
                <IconButton onClick={() => setYear(year + 1)}>
                    <RightIcon
                        sx={{ width: 36, height: 36, fontSize: 24, color: "var(--white)" }}
                    />
                </IconButton>
            </div>
        </>
    );
}
