import React, { useEffect, useState } from "react";

type TProps = {
    type: 'a' | 'email' | 'phone' | 'text'
    value: string
    href?: string
}

export const ContactValueContainer:React.FC<TProps> = React.memo((props) => {
    const [jsxValue, setJsxValue] = useState<JSX.Element>(<></>);

    useEffect(() => {
        switch(props.type) {
            case 'a':
                setJsxValue(
                    <a href={props?.href} target='_blank' rel="noreferrer noopener" className='contact-data-href'>{props.value}</a>
                )
                break;
            case 'email':
                setJsxValue(
                    <a href={`mailto: ${props.href}`} className='contact-data-href'>{props.value}</a>
                )
                break;
            case 'phone': 
                setJsxValue(
                    <a href={`tel:${props.href}`} className='contact-data-href'>{props.value}</a>
                )
                break;
            case 'text':
                setJsxValue(
                    <span className="contact-data-text">{props.value}</span>
                )
                break;
        }
    }, [props.value, props.type, props?.href])

    return <div className="contact-data-value-container">
        <span className="contact-data-value">
            {jsxValue}
        </span>
    </div>
})