import React from "react";

type TProps = {
    title: string
    href?: string
    pairData: Array<{value1: string, value2?: string}>
}

export const ContactContainer:React.FC<TProps> = React.memo((props) => {
    return <div className="contact-container">
        <div className="contact-header">
            <span className="contact-header-title">{props.title}</span>
            <span className="contact-header-line"></span>            
        </div>
        {
            props.href 
            ? <a href={props.href} className='contact-href'>{props.href}</a>
            : null
        }
        <div className="contact-data-container">
            {props.pairData.map(pair => {
                return <div key={pair.value1} className="contact-data-row">
                    <div className="contact-data-value-container">
                        <span className="contact-data-value">{pair.value1}</span>
                    </div>
                    {
                        pair?.value2
                        ? <div className="contact-data-value-container">
                            <span className="contact-data-value">{pair?.value2}</span>    
                        </div>
                        : null
                    }                    
                </div>
            })}
        </div>
    </div>
})