'use client';

import React from 'react';
import { X } from 'lucide-react';

interface FloatingPanelProps {
  title: string;
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  width?: string;
  height?: string;
  position?: { left?: number; top?: number };
}

const FloatingPanel: React.FC<FloatingPanelProps> = ({
  title,
  isOpen,
  onClose,
  children,
  width = 'w-80',
  height = 'h-[calc(100vh-120px)]',
  position = { left: 24, top: 80 }
}) => {
  if (!isOpen) return null;

  return (
    <div 
      className={`absolute ${width} ${height} bg-white rounded-lg shadow-lg border border-gray-300 z-30 overflow-hidden flex flex-col`}
      style={{ left: position.left, top: position.top }}
    >
      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200">
        <h3 className="text-sm font-medium text-gray-900">
          {title}
        </h3>
        <button
          onClick={onClose}
          className="p-1 rounded hover:bg-gray-100 transition-colors"
          aria-label="Close panel"
        >
          <X className="h-4 w-4 text-gray-500" />
        </button>
      </div>
      <div className="flex-1 overflow-y-auto bg-white">
        {children}
      </div>
    </div>
  );
};

export default FloatingPanel;