import React from "react";
import { CardProps } from "../models/types";
import { contactData } from "../lib/data";
import { useTranslations } from "next-intl";

function ContactCard({ icon: Icon, title, value }: CardProps) {
  const t = useTranslations("");
  return (
    <div className={"bg-white rounded-4xl p-10 flex items-center gap-10"}>
      <Icon size={70} />
      <div className={"flex flex-col"}>
        <span className={"text-2xl font-bold"}>{t(title)}</span>
        <span>{t(value)}</span>
      </div>
    </div>
  );
}

const ContactSection = () => {
  const t = useTranslations("");
  return (
    <section id={"contact-section.tsx"} className={"section-wrapper"}>
      <div className="bg-primary py-24 px-4">
        <div className={"my-container"}>
          <h1 className={"section-title text-center pb-10 text-white"}>
            {t("Kontaktlar")}
          </h1>
          <div className={"grid grid-cols-2 max-sm:grid-cols-1 gap-8"}>
            {contactData.map((e, i) => (
              <ContactCard
                icon={e.icon}
                title={e.title}
                value={e.value}
                key={i}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
export default ContactSection;
