import React from 'react';
import { CiTextAlignCenter } from 'react-icons/ci';
import Social_X_icon from '../../img_new_design_2025/social_i_X.png';
import Social_Link_icon from '../../img_new_design_2025/social_i_Link.png';
import Social_Fa_icon from '../../img_new_design_2025/social_i_Fa.png';

const ContactInfo = ({ style = {} }) => {
  const defaultStyles = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    padding: '20px',
    minWidth: '300px',
    backgroundColor: 'inherit',
    color: '#16274f',
    fontFamily: 'Inter, sans-serif',
  };

  const columnStyles = {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    marginBottom: '20px',
  };

  const labelStyles = {
    fontSize: '11px',
    fontWeight: 600,
    textTransform: 'uppercase',
    textAlign: 'left',
    color: '#16274F',
    fontSize: '12px',
    fontFamily: 'Inter',
    fontWeight: '600',
    textTransform: 'uppercase',
    wordWrap: 'break-word',
  };

  const valueStyles = {

    textAlign: 'left',
    color: '#16274F',
    fontSize: '14px',
    fontFamily: 'Inter',
    fontWeight: '400',
    wordWrap: 'break-word',

  };

  const linkStyles = {
    color: '#0aa690',
    textDecoration: 'none',
    fontSize: '16px',
    cursor: 'pointer',
  };

  const socialIconsContainerStyles = {
    display: 'flex',
    flexDirection: 'row',
    gap: '16px',
    marginTop: '16px',
  };

  const socialIconStyles = {
    width: '32px',
    height: '32px',
    cursor: 'pointer',
  };

  return (
    <div className='contact_automatic_files'>
      <div style={{ ...defaultStyles, ...style }}>
        <div style={columnStyles}>
          <div>
            <div style={labelStyles}>Adresse :</div>
            <div style={valueStyles}> 1 Cr du Havre, 75008 Paris</div>
            {/* <a href="https://maps.google.com" target="_blank" rel="noopener noreferrer" style={linkStyles}>
              Ouvrir sur Google Map
            </a>*/}
          </div>
        </div>

        <div style={columnStyles}>
          <div>
            <div style={labelStyles} >E-mail :</div>
            <a href="mailto:contact@mysy-training.com" target="_blank" style={{ ...valueStyles, textDecoration: 'underline' }}>
              contact@mysy-training.com
            </a>
          </div>
        </div>

        <div style={columnStyles}>
          <div>
            <div style={labelStyles} >Téléphone fixe :</div>
            <div style={valueStyles} >+33 1 77 00 38 57</div>
          </div>
        </div>

        <div style={columnStyles}>
          <div>
            <div style={labelStyles} >Téléphone portable :</div>
            <div style={valueStyles}>+33 7 69 20 39 45</div>
          </div>
        </div>

        <div style={columnStyles}>
          <div>
            <div style={labelStyles} >Nos réseaux sociaux :</div>
            <div style={socialIconsContainerStyles}>
              <a href="https://www.linkedin.com/company/mysy-training/" target="_blank"><img src="/img/contact_img_linkedin.png" alt="social Mysy Training LinkedIn" style={socialIconStyles} /></a>
              <a href="https://www.facebook.com/people/MySy-Training-Technology/100083219647910/" target="_blank"><img src={Social_Fa_icon} alt="social Mysy Training Facebook" style={socialIconStyles} /></a>
              <a href="https://twitter.com/mysy_training" target="_blank"> <img src={Social_X_icon} alt="social Mysy Training X (twitter)" style={socialIconStyles} /></a>

            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactInfo;

