import { Ad } from "@/types/ads";

// 1. Capitalize the name: AdHtml
// 2. Wrap the strings in JSX or use dangerouslySetInnerHTML
export default function AdHtml({ ad }: { ad: Ad }) {
    if (ad.type === "image" && ad.media_url) {
        return (
            <a href={ad.click_url} target="_blank" rel="noopener noreferrer">
                <img src={ad.media_url} alt={ad.title} style={{ width: "100%", height: "auto" }} />
            </a>
        );
    }

    if (ad.type === "html" && ad.media_url) {
        return (
            <a href={ad.click_url} target="_blank" rel="noopener noreferrer">
                <iframe
                    src={ad.media_url}
                    height="250"
                    width="100%"
                    style={{ overflow: "hidden", border: "none" }}
                    title="Ad Preview"
                />
            </a>
        );
    }

    if (ad.type === "video" && ad.media_url) {
        return (
            <a href={ad.click_url} target="_blank" rel="noopener noreferrer">
                <video src={ad.media_url} autoPlay muted loop style={{ height: "100%" }} />
            </a>
        );
    }

    return null; // Return null instead of an empty string for React components
}