import React, { ReactNode } from 'react';
import { useUIContext } from '../../../context/UIContext/useUIContext';
import './MainContent.css';

interface MainContentProps {
  children: ReactNode;
}

export const MainContent: React.FC<MainContentProps> = ({ children }) => {
  const { warningMessage, clearWarningMessage } = useUIContext();

  return (
    <main className="main-content">
      {warningMessage && (
        <div className={`warning-message warning-${warningMessage.type}`}>
          <span className="warning-text">{warningMessage.text}</span>
          <button
            className="close-warning"
            onClick={clearWarningMessage}
            aria-label="Close message"
          >
            ×
          </button>
        </div>
      )}

      <div className="content-container">
        {children}
      </div>
    </main>
  );
};

export default MainContent;