'use client'

import { useState } from 'react'
import { usePathname } from 'next/navigation'
import { motion, AnimatePresence } from 'framer-motion'
import { FaEnvelope, FaTimes } from 'react-icons/fa'
import styles from './CallButton.module.css'

export default function CallButton() {
    const pathname = usePathname()
    const [isOpen, setIsOpen] = useState(false)

    // Check if catering page
    const isCateringPage = pathname === '/catering-services-ontario' || pathname?.startsWith('/catering-services-ontario/')

    // Catering page → email button
    if (isCateringPage) {
        return (
            <div className={styles.fixedWrapper}>
                <a
                    href="mailto:hello@antalyarestaurant.ca"
                    className={styles.callBtn}
                    aria-label="Email Antalya Restaurant"
                >
                    <FaEnvelope className={styles.icon} />
                </a>
            </div>
        )
    }

    // All other pages → Kitchener call popup
    const toggleOpen = () => setIsOpen(!isOpen)

    return (
        <div className={styles.fixedWrapper}>
            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        className={styles.menu}
                        initial={{ opacity: 0, scale: 0.8, y: 10 }}
                        animate={{ opacity: 1, scale: 1, y: 0 }}
                        exit={{ opacity: 0, scale: 0.8, y: 10 }}
                        transition={{ duration: 0.2 }}
                    >
                        <a href="tel:+15195816363" className={styles.menuItem}>
                            <span className={styles.locationName}>Kitchener</span>
                            <span className={styles.phoneNumber}>519-581-6363</span>
                        </a>
                    </motion.div>
                )}
            </AnimatePresence>

            <button
                className={styles.callBtn}
                onClick={toggleOpen}
                aria-label={isOpen ? 'Close location menu' : 'Call Antalya Kitchener'}
                aria-expanded={isOpen}
            >
                {isOpen ? (
                    <FaTimes className={styles.icon} />
                ) : (
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        className={styles.icon}
                    >
                        <path
                            fill="currentColor"
                            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.05 12.05 0 0 0 .57 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.03 12.03 0 0 0 2.81.57A2 2 0 0 1 22 16.92z"
                        />
                    </svg>
                )}
            </button>
        </div>
    )
}
