import React from "react";

import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
import Loader from "../Loader";
import Image from "next/image";

type IProps = {
	href: string;
	fileName?: string;
};
type IState = {};

export default class FilePreview extends React.Component<IProps, IState> {
	override render() {
		let type = this.props.href.split(".").pop();
		if (this.props.fileName) type = this.props.fileName.split(".").pop();
		return (
			<div className={classes["root"]}>
				<div className={classes["loader"]}>
					<Loader />
				</div>

				{!type && (
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
						Erreur lors du chargement du fichier
					</Typography>
				)}
				<div className={classes["file-container"]}>
						{type?.toLowerCase() === "pdf" && (
							<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
						)}
						{type?.toLowerCase() !== "pdf" && <Image src={this.props.href} alt="File preview" className={classes["image"]} />}
					</div>
			</div>
		);
	}
}