import { ReactNode } from 'react';
import Avatar from '../Avatar';
import { MessageBarWrap } from './MessageBarWrap';

export interface MessageBarProps {
  icon: string;
  tips: ReactNode;
  actions?: ReactNode;
}

export const BottomTabBar = function ({
  icon,
  tips,
  actions,
}: MessageBarProps) {
  return (
    <MessageBarWrap>
      <div className="messageBarContainer">
        <div className="iconContainer">
          <Avatar borderless={true} imgSrc={icon} />
        </div>
        <div className="contentContainer">
          {tips}
          {actions}
        </div>
      </div>
    </MessageBarWrap>
  );
};
export default BottomTabBar;
