import * as React from "react";
import "./HeroAsideSection.scss";
import HeroAsideItem from "../HeroAsideItem";

export enum BackgroundColor {
  DarkBlue,
  LightTurquoise,
}
export interface HeroAsideSectionProps {
  backgroundColor: BackgroundColor;
}
export interface HeroAsideSectionState {}

const colors = new Map<BackgroundColor, string>([
  [BackgroundColor.DarkBlue, "dark-blue"],
  [BackgroundColor.LightTurquoise, "light-turquoise"],
]);

class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
  render() {
    const { backgroundColor } = this.props;
    const bgClass = colors.get(backgroundColor);
    const className = `hero-aside-section ${bgClass}`;
    return (
      <div className={className}>
        <div className="hero-aside-section-block">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default HeroAsideSection;