import { useState, useEffect } from "react";
import { X, Phone } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

export const RentNoticePopup = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsOpen(true);
    }, 10000);

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

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold text-center">
            Domain Available for Rent
          </DialogTitle>
        </DialogHeader>
        <div className="flex flex-col items-center gap-4 py-4">
          <p className="text-center text-muted-foreground">
            This premium domain is available for lease. Perfect for painting contractors in the Livingston, NJ area.
          </p>
          <a
            href="tel:978-267-7070"
            className="flex items-center gap-2 bg-secondary text-secondary-foreground px-6 py-3 rounded-lg hover:opacity-90 transition-opacity font-semibold"
          >
            <Phone className="h-5 w-5" />
            Call 978-267-7070
          </a>
        </div>
      </DialogContent>
    </Dialog>
  );
};
