import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './projectSection.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProjectSectionProps = StateProps & DispatchProps & OwnProps;

const ProjectSection = (props: ProjectSectionProps) => {
  const { image, title, text, alt, left, background } = props;
  return (
    <div className={styles('ProjectSection', background)}>
      <div className={styles('container')}>
        {left && image && (
          <div className={styles('picture', 'left')}>
            <img src={image} alt={alt || title} />
          </div>
        )}
        <div className={styles('content', left && 'left')}>
          <div className={styles('title')}>
            <TextItem path={title} />
          </div>
          <div className={styles('text')}>
            <TextItem isHtml path={text} />
          </div>
        </div>
        {!left && image && (
          <div className={styles('picture')}>
            <img src={image} alt={alt || title} />
          </div>
        )}
      </div>
    </div>
  );
};

export default ProjectSection;
