import React from "react"
import { twMerge } from "tailwind-merge"

interface IFrame {
    url?: string
    className?: string
    options?: any
}

const layoutClass = {
    xs: {
        main: "h-xl",
    },
    base: {
        main: "h-2xl",
    },
    xl: {
        main: "h-3xl",
    },
}

const Iframe = (props: IFrame) => {
    const { url, className = "" } = props
    const options = props.options ?? {}

    const lclass = layoutClass[options.size || "base"]
    const oClass = options.class || {}

    if (!url) return null
    return (
        <iframe
            src={url}
            className={twMerge("w-full", lclass.main, oClass.main, className)}
        ></iframe>
    )
}

export default Iframe