import React from 'react';
import PropTypes from 'prop-types';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';

/**
 * TemplateNameSection component - Template name input (shown only in full mode)
 */
export const TemplateNameSection = ({
  isFullMode,
  value,
  error,
  onChange,
  formatMessage,
  messages,
}) => {
  if (!isFullMode) return null;

  return (
    <>
      <CapRow className="input-group creative-name-container">
        <CapInput
          id="webpush-template-name-input"
          className="webpush-template-name-input"
          label={formatMessage(messages.creativeName)}
          placeholder={formatMessage(messages.creativeNamePlaceholder)}
          value={value}
          onChange={onChange}
          size="default"
          status={error ? 'error' : ''}
          help={error ? formatMessage(messages.emptyTemplateErrorMessage) : ''}
        />
      </CapRow>
      <CapDivider />
    </>
  );
};

TemplateNameSection.propTypes = {
  isFullMode: PropTypes.bool.isRequired,
  value: PropTypes.string.isRequired,
  error: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  formatMessage: PropTypes.func.isRequired,
  messages: PropTypes.object.isRequired,
};

TemplateNameSection.defaultProps = {
  error: false,
};

export default TemplateNameSection;

