import React from "react";
import "./index.scss";
import Avatar from '@mui/material/Avatar';

export default function Header(props: any) {
  const { headerData } = props;
  return (
    <header className="home-header">
      <div id="myCarousel" className="carousel slide" data-ride="carousel">
        <div className="carousel-inner">
          {headerData.map((item: any, i: Number) => (
            <div
              className={item.id === 0 ? "item active" : "item"}
              style={{
                background: `url(${item.imageUrl})`,
              }}
            >
              <div className="home-header__cover"></div>
              <div className="home-header__info d-flex flex-column">
                <div className="home-header__info--author d-flex">
                  <Avatar src={item.authorImage} />
                  <div className="d-flex flex-column">
                    <h3>{item.author}</h3>
                    <i>نویسنده</i>
                  </div>
                </div>
                <h1>{'0' + (item.id + 1)}</h1>
                <h1>{item.name}</h1>
                <h2>{item.subTitle}</h2>
              </div>
            </div>
          ))}
        </div>
        <div className="carousel-indicators">
          {headerData.map((item1: any, i: any) => (
            <li
              className="d-flex align-items-center"
              data-target="#myCarousel"
              data-slide-to={item1.id}
              key={i}
            >
              <span className={i === 0 ? "active" : ""}></span>
              <div className="d-flex flex-column">
                <b>0{item1.id + 1}</b>
                <strong>{item1.name}</strong>
              </div>
            </li>
          ))}
        </div>
      </div>
    </header>
  );
}
