import { stringToSlug } from "../utils";

export function Hhopp({text, id}:{text: string, id?: string}){
    const arr: JSX.Element[]  = []; 
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    for (let i = 0; i < text.length; i++) {
        const x = text.charAt(i); 
        arr.push(<span aria-hidden="true">{x}</span>)
    }
    return(
        <h1 id={idtext} className="playful" aria-label="Wash your hands">
            {arr}        
        </h1>
    )
}

export function Hsmoke({text, id}:{text: string, id?: string}){
    const arr: JSX.Element[]  = []; 
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    for (let i = 0; i < text.length; i++) {
        const x = text.charAt(i); 
        arr.push(<span aria-hidden="true">{x}</span>)
    }
    return(
        <h1 id={idtext} className="smoke" aria-label="Wash your hands">
            {arr}        
        </h1>
    )
}

export function H1({text, id}:{text: string, id?: string}){
    /* var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
    <div id={idtext} className="row hone">
        <svg width="100%" height="100%">
        <text x="0%" y="60%">
        {text}
        </text>
    </svg>
    </div>
    ) */
   return(
    <h1 id={id} >{text}</h1>
   )
}


export function H2({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
        <div>
            <h1 id={idtext}>{text}</h1>
        </div>
        
    )
}

export function H3({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
        <div>
            <h2 id={idtext}> {text} </h2>  
        </div>
        
    )
}
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
    return(
        <div>
            <h2   id={id}> {children} </h2>  
        </div>
        
    )
}
export function H4({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
        <div>
            <h3 id={idtext}> {text} </h3>  
        </div>
        
    )
}
export function H5({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
            <h4 id={idtext}> {text} </h4>  
        
    )
}


export function Hhighlight({children}:{children: React.ReactNode}){
    return(
    <div className="content v2">
        <p>{children}</p>
    </div>
    )
}
export function Hspoiler({children}:{children: React.ReactNode}){
    return(
    <div className="content v3">
        <p>{children}</p>
    </div>
    )
}

export function Hwave({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
    return(
       /*  <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
        <defs>
            <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="5%" stopColor="#850F78"/>
            <stop offset="95%" stopColor="#A0A7F3"/>
            </linearGradient>
            <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
            <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 
                <animateTransform
                    attributeName="transform"
                    begin="0s"
                    dur="3s"
                    type="translate"
                    from="0,0"
                    to="40,0"
                    repeatCount="indefinite" />
            </path>
            </pattern>
        </defs>
        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="white"  fillOpacity="1">{text}</text>
        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"  fillOpacity="0.7">{text}</text>
        <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.9">{text}</text>
        </svg> */
        <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
    <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="5%" stopColor="#850F78" />
            <stop offset="95%" stopColor="#A0A7F3" />
        </linearGradient>
        <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
            <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)">
                <animateTransform
                    attributeName="transform"
                    begin="0s"
                    dur="3s"
                    type="translate"
                    from="0,0"
                    to="40,0"
                    repeatCount="indefinite" />
            </path>
        </pattern>
    </defs>
    <text textAnchor="middle" x="50" y="15" fontSize="13"  stroke="var(--ourbeige)" strokeWidth={"0.2px"}  fill="url(#gradient)">{text}</text>
    <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"stroke="var(--ourbeige)" strokeWidth={"0.2px"}   fillOpacity="1">{text}</text>
</svg>
    )
}

export function Hpopart({text, id}:{text: string, id?: string}){
    var idtext: string; 
    if (id) {
        idtext = id; 
    }
    else{
        idtext = stringToSlug(text); 
    }
return(
    <div id={idtext} className="row">
        <div className="col">
    <div className="relative popart-wrapper">
        <div className="absolute popart">
            {text}
        </div> 
        </div>
    </div>
    </div>
)
}

export function Hshadone({text}:{text: string}){
    return(
    <div className="h3-box">
        <p className="stroke shadow-stroke">{text}</p>
    </div>
    )
}
export default H1;