import Image from "next/image";
import DataLink from "@/components/common/DataLink";
import {
  contactInfoContent,
  contactInfoItems,
  contactInfoSocialItems,
} from "@/data/contactInfo";

const ContactInfo = () => {
  return (
    <div
      className="contact-content2"
      data-aos="fade-right"
      data-aos-duration={900}
      data-aos-delay={300}
    >
      <div className="sec-title">
        <span className="sub-title">{contactInfoContent.subtitle}</span>
        <h2 className="title">{contactInfoContent.title}</h2>
        <p>{contactInfoContent.description}</p>
      </div>

      <div className="contact-info">
        <span className="help-line">{contactInfoContent.helpLabel}</span>

        {contactInfoItems.map((item) => (
          <DataLink
            key={item.title}
            href={item.href}
            title={item.title}
            className="nmbr"
          >
            {item.type === "address" ? (
              <>
                {item.lines[0]} <br />
                {item.lines[1]}
              </>
            ) : (
              item.text
            )}
          </DataLink>
        ))}

        <div className="social-links-info">
          <span className="help-line">{contactInfoContent.socialLabel}</span>
          <ul className="social-links2">
            {contactInfoSocialItems.map((social) => (
              <li key={social.title}>
                <DataLink href={social.href} title={social.title}>
                  <Image
                    src={social.icon}
                    alt={social.alt}
                    width={social.width}
                    height={social.height}
                  />
                </DataLink>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default ContactInfo;