import ImageStyle from "@/styles/Image.module.sass"
import Link from "./Link";


// const regex = /@(?<username>\w*)@(?<site>\w*\S*)/gm;

const Image = ({ src, alt }: { src: string, alt: string }) => {
    const regex = /@(?<username>\w+)@(?<site>\w{2,}\.[a-z]{2,10})/gm;
    if (alt.match(regex)) {
        const newAlt = alt.replace("art by", "")
        const sub = "https://$<site>/@$<username>";
        const link = newAlt.replace(regex, sub);
        return (
            <figure>
                <img style={{
                    borderRadius: "10px",
                }} src={src} alt={alt} />
                <span className={ImageStyle.alt} > art by <Link
                    href={link}
                    title={newAlt.replace(regex, link).replace('https://', "")}
                /></span>
            </figure>
        )
    }

    else {

        return (
            <figure>
                <img style={{
                    borderRadius: "10px",
                }} src={src} alt={alt} />
                <span className={ImageStyle.alt}>{alt}</span>

            </figure>
        );
    }
};

export default Image;