import styled from '@emotion/styled';

import CreateWaveform from './CreateWaveform';

type WrapperProps = {
  height?: number;
};

const Wrapper = styled.div<WrapperProps>`
  width: 100%;
  height: ${(props) => props.height ?? 80}px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  cursor: text;
`;

const OverlayPositioner = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
`;

export default function CreateAudioDisplay({
  isPlaying,
  sampleAudio,
  getCurrentProgress,
  setCurrentProgress,
  frameCountRef,
  children,
  height,
}: {
  isPlaying?: boolean;
  sampleAudio: (progress: number) => number;
  getCurrentProgress: () => number;
  setCurrentProgress: (progress: number) => void;
  frameCountRef?: React.RefObject<number>;
  children?: React.ReactNode;
  height?: number;
}) {
  return (
    <Wrapper height={height}>
      <CreateWaveform
        isPlaying={isPlaying}
        sampleAudio={sampleAudio}
        getCurrentProgress={getCurrentProgress}
        setCurrentProgress={setCurrentProgress}
        frameCountRef={frameCountRef}
      />
      {children && <OverlayPositioner>{children}</OverlayPositioner>}
    </Wrapper>
  );
}