import { useEffect, useState } from "react";
import "./preview.less";
import Config from "@/util/config";
const Preview = (props: any) => {
  const { list } = props;
  const [selectIndex, setSelectIndex] = useState<number>(0);
  useEffect(() => {
    return () => {
      setSelectIndex(0);
    };
  }, []);
  return (
    <div className="preview_container">
      <div className="preview_left">
        {list?.map((item: any, index: number) => (
          <span
            className={selectIndex === index ? "select" : ""}
            onClick={() => setSelectIndex(index)}
            key={item.archives_name}
          >
            {item.archives_name}
          </span>
        ))}
      </div>
      <div className="preview_center"></div>
      <div className="preview_right">
        {list && list.length > 0 ? (
          <img
            style={{ width: "100%", minHeight: "200px" }}
            src={Config.baseUrl + "uploads/" + list[selectIndex].file_url}
            alt={list[selectIndex].file_url}
          />
        ) : null}
      </div>
    </div>
  );
};

export default Preview;
