import Modal from '../modal/Modal';
import OnboardingModalContent from './Onboarding/OnboardingModalContent';
import { useLogStudioWebUserEvent } from './useLogStudioWebUserEvent';

export default function StudioLearnModal({ onClose }: { onClose: () => void }) {
  const logStudioWebUserEvent = useLogStudioWebUserEvent();
  return (
    <Modal
      onClose={() => {
        onClose();
        logStudioWebUserEvent({
          actionName: 'StudioLearnModalClosed',
          context: {},
        });
      }}
      width={null}
      contentWrapperClasses='max-h-[90vh] max-w-[90vw] w-[1280px] overflow-hidden bg-background-primary border border-background-secondary rounded-xxl'
      wrapperClasses='h-full w-full flex flex-col overflow-hidden p-8'
      closeButtonClasses='absolute top-8 right-8 z-100'
    >
      <OnboardingModalContent />
    </Modal>
  );
}