import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styles from './styles.module.css';
import { useState } from 'react';
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
export default function WheelFrame({ Carusel, posterItems, onFrontPosterChange, isExecuting, isStatic }) {
    const [upArrow, setUpArrow] = useState(0);
    const [downArrow, setDownArrow] = useState(0);
    return _jsxs("div", { className: styles.frameContainer, children: [!isStatic && _jsx("div", { className: styles.upArrow, onClick: () => setUpArrow(upArrow + 1), children: _jsx(FiChevronUp, { size: 40, color: '#133c46' }) }), _jsx("div", { className: styles.innerSquare, style: {
                    boxShadow: isExecuting ? `inset 0px 0px 10px 5px black` : 'none',
                }, children: _jsx(Carusel, { onUpArrow: upArrow, onDownArrow: downArrow, posterItems: posterItems, onFrontPosterChange: onFrontPosterChange, isStatic: isStatic }) }), !isStatic && _jsx("div", { className: styles.downArrow, onClick: () => setDownArrow(downArrow + 1), children: _jsx(FiChevronDown, { size: 40, color: '#133c46' }) })] });
}
