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: any) => (
            <div
              className={i === 0 ? "item active" : "item"}
              style={{
                background: `url(${"https://dnvn.ir/api/v1/file/" + item.fileId})`,
              }}
              // dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
              key={i}
            >
              <div className="home-header__cover"></div>
              <div className="home-header__info d-flex flex-column">
                <div className="home-header__info--author d-flex">
                  {item.authorImage && <Avatar src={item.authorImage} />}
                  <div className="d-flex flex-column">
                    <h3>{item.extraText}</h3>
                    {/* <i>نویسنده</i> */}
                  </div>
                </div>
                {/* <h1>{(Number(i) + 1)}</h1> */}
                <h1>{item.title}</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={i}
              key={i}
            >
              <span className={i === 0 ? "active" : ""}></span>
              <div className="d-flex flex-column">
                <b>{"."}</b>
                <strong>{item1.title}</strong>
              </div>
            </li>
          ))}
        </div>
      </div>
    </header>
  );
}
