"use client";
import React from "react";
import { useIsMobile } from "@/hooks/use-mobile";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Drawer as DrawerPrimitive } from "vaul";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

interface ResponsiveModalProps {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  title?: string;
  children: React.ReactNode;
  className?: string;
  side?: "bottom" | "right";
}

export function ResponsiveModal({ open, onOpenChange, title, children, className, side = "bottom" }: ResponsiveModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={cn("sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col", className)}>
        {title && (
          <DialogHeader>
            <DialogTitle dir="rtl" className="flex items-center gap-2 font-bold">{title}</DialogTitle>
          </DialogHeader>
        )}
        <div className="flex-1 overflow-y-auto no-scrollbar pb-2">
          {children}
        </div>
      </DialogContent>
    </Dialog>
  );
}