import {useResize} from "@fanam-pkg/core-utils"
import {ImageView} from "../../atoms"
import {MediaPreviewProps} from "../../props"
import styles from "./styles.module.sass"

export const MediaPreview = ({url, mime}: MediaPreviewProps) => {
  const {isDesktop} = useResize()

  return (
    <section className={styles.media_container}>
      {mime === "image" ? (
        <ImageView src={url} imgWidth={isDesktop ? 800 : 360} imgHeight={isDesktop ? 400 : 200} alt="brand" />
      ) : (
        <iframe
          src={mime === "video" ? url?.concat("?autoplay=1") : url}
          width={isDesktop ? 800 : 360}
          height={isDesktop ? 400 : 200}
          allowFullScreen
          title="YouTube Video"
        />
      )}
    </section>
  )
}