import { Call, Location, MessageQuestion, Sms } from "iconsax-reactjs";
import { type FC, type ReactNode } from "react";

type ContactItemProps = {
  icon: ReactNode;
  children: ReactNode;
};

const ContactItem: FC<ContactItemProps> = ({ icon, children }) => {
  return (
    <div className="flex items-start gap-3">
      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-primary text-primary">{icon}</div>
      <div className="text-sm leading-6 text-[#3A4147]">{children}</div>
    </div>
  );
};

const FooterContact: FC = () => {
  return (
    <div className="flex max-w-none sm:max-w-[280px] flex-col gap-5">
      <ContactItem icon={<Location size={18} color="currentColor" variant="Linear" />}>
        جاده خاوران، شریف آباد، شهرک صنعتی شنزار، بعد از میدان چهارم، خیابان بوستان پنجم، خیابان گلبهار، پلاک ۱۲۲
      </ContactItem>

      <ContactItem icon={<Call size={18} color="currentColor" variant="Linear" />}>
        <div className="flex flex-col gap-0.5">
          <span>۰۲۱-۳۶۹۱۱۵۹۹ | ۰۲۱-۳۶۹۱۰۷۹۹</span>
          <span>۰۲۱۳۴۷۸۲۰۰۰ (۳۰ خط)</span>
        </div>
      </ContactItem>

      <ContactItem icon={<Sms size={18} color="currentColor" variant="Linear" />}>
        <div className="flex flex-col gap-0.5">
          <span className="font-bold text-[#0A1B2C]">پاسخگوی سوالات شما</span>
          <a href="mailto:info@example.com" className="hover:text-primary" dir="ltr">
            info@example.com
          </a>
        </div>
      </ContactItem>

      <ContactItem icon={<MessageQuestion size={18} color="currentColor" variant="Linear" />}>
        <div className="flex flex-col gap-0.5">
          <span>نیاز به راهنمایی دارید؟</span>
          <a href="#" className="font-bold text-[#0A1B2C] hover:text-primary">
            از طریق سوالات متداول پاسخ خود را پیدا کنید.
          </a>
        </div>
      </ContactItem>
    </div>
  );
};

export default FooterContact;