import * as React from "react"
import { Container, ListLayout, ListImg, Icon } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  className: string
  title: string
  storyData: storyData[]
}

const EducationStory: React.FC<IProps> = props => {
  const { className, title, storyData } = props
  return (
    <div>
      {(title || storyData.length > 0) && (
        <div
          className={`${styles.educationStory} ${className ? className : ""}`}
        >
          <Container>
            <h1 className="common-h1-title">{title}</h1>
            {storyData && storyData.length > 0 && (
              <ListLayout listData={storyData}>
                {(item: storyData) => (
                  <div className={`common-card-content ${styles.inner}`}>
                    <Icon name="quotes" />
                    <div className={styles.logo}>
                      <ListImg imgInfo={item?.image} scale={[1, 1]} />
                    </div>
                    <h3>{item.name}</h3>
                    <p>{item.title}</p>
                    <div className={styles.description}>{item.description}</div>
                  </div>
                )}
              </ListLayout>
            )}
          </Container>
        </div>
      )}
    </div>
  )
}

export default EducationStory