import { ReactElement, RefObject } from 'react';

type Props = {
  canvasRef: RefObject<HTMLCanvasElement | null>;
  renderBottomSection?: () => ReactElement;
  renderCanvasOverlay?: () => ReactElement;
};

export const CanvasWrapper = ({
  canvasRef,
  renderBottomSection,
  renderCanvasOverlay,
}: Props) => {
  return (
    <div className='flex flex-1 flex-col rounded-[20px]'>
      <div className={'relative flex w-full flex-1 flex-row'}>
        <canvas
          ref={canvasRef}
          className='absolute top-0 right-0 bottom-0 left-0 h-full w-full bg-transparent'
        />
        {!!renderCanvasOverlay ? renderCanvasOverlay() : null}
        {/*Array.from({ length: 13 }).map((_, i) => (
          <div
            key={i}
            className={clsx('flex-1', {
              'border-r-[0.5px] border-border-secondary': i < 12,
            })}
          ></div>
        ))*/}
      </div>
      {!!renderBottomSection ? (
        <div className='flex h-10 w-full flex-row items-center border-t-[0.5px] border-border-secondary p-1 px-2'>
          {renderBottomSection()}
        </div>
      ) : null}
    </div>
  );
};