"use client";

import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";

export default function ScrollPopup() {
  const [showPopup, setShowPopup] = useState(false);
  const [closed, setClosed] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300 && !closed) {
        setShowPopup(true);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [closed]);

  useEffect(() => {
    let timeout: NodeJS.Timeout;
    if (closed) {
      timeout = setTimeout(() => {
        setClosed(false);
        setShowPopup(true);
      }, 30000); // 30 seconds
    }
    return () => clearTimeout(timeout);
  }, [closed]);

  return (
    <div
      className={`fixed bottom-0 left-0 w-full p-0 transition-all duration-500   ${
        showPopup ? "opacity-100 translate-y-0" : "opacity-0 translate-y-full"
      }`}
    >
      {showPopup && (
        <Card className="w-full bg-blue-500 shadow-lg relative rounded-none h-[80px] flex items-center">
          {/* Close Button */}
          <button
            className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
            onClick={() => {
              setClosed(true);
              setShowPopup(false);
            }}
          >
            <X size={24} />
          </button>

          <CardContent className="flex flex-col md:flex-row items-center justify-between w-full  max-w-6xl mx-auto px-6 space-y-3 md:space-y-0">
            {/* Text Content */}
            <div className="flex items-center space-x-3">
              <h2 className="text-lg font-bold text-white md:text-2xl">
                Apply for a Credit Card
              </h2>
              <p className="text-white text-sm md:text-2xl">
                Get up to AED 1500 Welcome Bonus.
              </p>
            </div>

            {/* Input & Button */}
        <div className="w-full md:w-auto">
  <div className="flex items-center space-x-2">
    <input
      type="text"
      placeholder="Enter Mobile no."
      className="w-full md:w-64 p-2 border border-gray-300 rounded-md text-center md:text-left"
    />
    <Button className="bg-red-600 text-white px-6 py-2">
      Submit
    </Button>
  </div>
  <p className="text-xs text-gray-500 mt-1 ml-1">
    *T&C apply
  </p>
</div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}