import styles from './styles.module.css';
import { CarouselProps } from '../carousel';
import { useState } from 'react';
import { PosterItem } from '../../types';
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';

export interface WheelFrameProps {
    Carusel: React.FC<CarouselProps>;
    posterItems: PosterItem[];
    onFrontPosterChange: (item: PosterItem) => void;
    isExecuting?: boolean;
    isStatic?: boolean;
}

export default function WheelFrame({
    Carusel,
    posterItems,
    onFrontPosterChange,
    isExecuting,
    isStatic
}: WheelFrameProps) {
    const [upArrow, setUpArrow] = useState(0);
    const [downArrow, setDownArrow] = useState(0);

    return <div className={styles.frameContainer}>
        {!isStatic && <div className={styles.upArrow} onClick={() => setUpArrow(upArrow + 1)}><FiChevronUp size={40} color='#133c46'/></div>}
        <div className={styles.innerSquare} style={{
            boxShadow: isExecuting ? `inset 0px 0px 10px 5px black` : 'none',
        }}>
            <Carusel
                onUpArrow={upArrow}
                onDownArrow={downArrow}
                posterItems={posterItems}
                onFrontPosterChange={onFrontPosterChange}
                isStatic={isStatic}
            />
        </div>
        {!isStatic && <div className={styles.downArrow} onClick={() => setDownArrow(downArrow + 1)}><FiChevronDown size={40} color='#133c46'/></div>}
    </div>
}