/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from "./contact-channels.module.scss"
import { FiMapPin, FiMail, FiClock } from "react-icons/fi"
import { motion } from "framer-motion"

export default function ContactInfoStrip({ info }: any) {
  return (
    <section className={styles.strip}>
      <motion.div
        className={styles.inner}
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        viewport={{ once: true }}
      >
        <div>
          <FiMapPin />
          <h4>Our Office</h4>
          <p>{ info?.office_address || "Remote - Global" }</p>
        </div>

        <div>
          <FiMail />
          <h4>Email Support</h4>
          <p>{ info?.contact_email || "contact@yourdomain.com" }</p>
        </div>

        <div>
          <FiClock />
          <h4>Support Hours</h4>
          <p>24/7 Availability</p>
        </div>
      </motion.div>
    </section>
  )
}