import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';

import useEditableComponent from '../useEditableComponent';
import { Typography } from '@/mui/components';

import styles from './VideoName.module.scss';

function VideoName({ isEditable = false, isWide = false, editableComponent = null, ...props }) {
  const { isShowedEditable, handleShowEditable, handleHideEditable } = useEditableComponent(isEditable);

  return (
    <Typography
      data-id="name"
      variant={isWide ? 'h6Alt' : 'subtitle1'}
      color="text.primary"
      className={classNames(styles.Container, {
        [styles.Container___isEditable]: isEditable,
      })}
      onClick={handleShowEditable}
    >
      {isShowedEditable ? editableComponent(handleHideEditable) : props.name}
    </Typography>
  );
}

VideoName.propTypes = {
  name: PropTypes.string.isRequired,
  isEditable: PropTypes.bool,
  isWide: PropTypes.bool,
  editableComponent: PropTypes.node,
};

export default VideoName;
