import React from "react";
import Avatar from "@mui/material/Avatar";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";

function Course({ data, theme, setActiveBook }: any) {
  return (
    <>
      <div
        className={_.join(
          [
            "home-courses-course desktop flex-column",
            theme === "light"
              ? "home-courses-course-light"
              : "home-courses-course-dark",
          ],
          " "
        )}
        onClick={() => setActiveBook(data)}
        draggable={"false"}
      >
        <img
          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
          alt={data.name}
          draggable={"false"}
        />
        <footer className="d-flex">
          <Avatar
            src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
            style={{ width: 40, height: 40 }}
          />
          <div className="home-courses-course__info d-flex flex-column">
            <h2>{data.name}</h2>
          </div>
        </footer>
      </div>
      <Link
        to={`/courses/${data.id}`}
        className={_.join(
          [
            "home-courses-course mobile flex-column",
            theme === "light"
              ? "home-courses-course-light"
              : "home-courses-course-dark",
          ],
          " "
        )}
        draggable={"false"}
      >
        <img
          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
          alt={data.name}
          draggable={"false"}
        />
        <footer className="d-flex">
          <Avatar
            src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
            style={{ width: 40, height: 40 }}
          />
          <div className="home-courses-course__info d-flex flex-column">
            <h2>{data.name}</h2>
          </div>
        </footer>
      </Link>
    </>
  );
}

export default connect((state: any) => ({
  theme: state.publicApi.theme,
}))(Course);
