"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "motion/react";

export function IPhoneNotification({ show, title, message, onClose, duration = 3000 }) {
  const [isHovered, setIsHovered] = useState(false);

  React.useEffect(() => {
    if (show && duration > 0) {
      const timer = setTimeout(() => {
        onClose && onClose();
      }, duration);

      return () => clearTimeout(timer);
    }
  }, [show, duration, onClose]);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0, y: -100, x: "-50%" }}
          animate={{ opacity: 1, y: 0, x: "-50%" }}
          exit={{ opacity: 0, y: -100, x: "-50%" }}
          transition={{ duration: 0.3, ease: "easeOut" }}
          style={styles.card}
          onClick={onClose}
          onHoverStart={() => setIsHovered(true)}
          onHoverEnd={() => setIsHovered(false)}
          whileHover={{ scale: 1.05 }}
        >
          <motion.div 
            style={{
              ...styles.img,
              background: isHovered 
                ? "linear-gradient(#9198e5, #712020)" 
                : "linear-gradient(#d7cfcf, #9198e5)"
            }}
          ></motion.div>
          <div style={styles.textBox}>
            <div style={styles.textContent}>
              <p style={styles.h1}>{title}</p>
              <span style={styles.span}>now</span>
            </div>
            <p style={styles.p}>{message}</p>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

const styles = {
  card: {
    position: "fixed",
    top: 20,
    left: "50%",
    width: "100%",
    maxWidth: "290px",
    height: "70px",
    background: "#27272a", // zinc-800 - same grey as search bar
    borderRadius: "20px",
    display: "flex",
    alignItems: "center",
    justifyContent: "left",
    backdropFilter: "blur(10px)",
    transition: "0.5s ease-in-out",
    zIndex: 10000,
    cursor: "pointer",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
    border: "1px solid rgba(231, 170, 240, 0.2)",
  },
  img: {
    width: "50px",
    height: "50px",
    marginLeft: "10px",
    borderRadius: "10px",
    background: "linear-gradient(#d7cfcf, #9198e5)",
    transition: "0.5s ease-in-out",
  },
  textBox: {
    width: "calc(100% - 90px)",
    marginLeft: "10px",
    color: "#e7aaf0",
    fontFamily: "'Poppins', sans-serif",
  },
  textContent: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
  },
  span: {
    fontSize: "10px",
    opacity: 0.7,
  },
  h1: {
    fontSize: "16px",
    fontWeight: "bold",
    margin: 0,
  },
  p: {
    fontSize: "12px",
    fontWeight: "lighter",
    margin: "4px 0 0 0",
    opacity: 0.8,
  },
};