import React, { useState } from 'react';
import { type CurriculumVideoContents } from '@/types/curriculumContents.type';
import { Flex } from '@/atoms/flex';
import { Spinner } from '@/atoms/spinner';

interface CurriculumVideoProps {
  item: CurriculumVideoContents;
}

function CurriculumVideo(props: CurriculumVideoProps): React.ReactNode {
  const { item } = props;
  const { url } = item;
  const [isLoading, setIsLoading] = useState(true);

  return (
    <Flex
      align="center"
      justify="center"
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: 'black',
        position: 'relative',
      }}
    >
      {isLoading ? (
        <Flex
          align="center"
          height="100%"
          justify="center"
          position="absolute"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 1,
            color: 'white',
          }}
          width="100%"
        >
          <Spinner size="3" style={{ width: 48, height: 48 }} />
        </Flex>
      ) : null}
      <iframe
        allowFullScreen
        onLoad={() => {
          setIsLoading(false);
        }}
        src={`${url}?theme=light`}
        style={{ width: '100%', height: '100%', border: 'none' }}
        title="Curriculum Video"
        onError={() => {
          setIsLoading(false);
        }} // 필요시 에러 메시지로 대체
      />
    </Flex>
  );
}

export default CurriculumVideo;
