1
import React from 'react';
2

3
type BrowserWindowProps = {
4
  children: React.ReactNode;
5
  url?: string;
6
  className?: string;
7
  childrenClassName?: string;
8
  ref?: React.RefObject<HTMLDivElement | null>;
9
} & React.HTMLAttributes<HTMLDivElement>;
10

11
const BrowserWindow: React.FC<BrowserWindowProps> = ({
12
  children,
13
  url,
14
  className,
15
  childrenClassName,
16
  ref,
17
  ...props
18
}) => {
19
  return (
20
    <div
21
      ref={ref}
22
      className={`flex flex-col items-center justify-between rounded-lg overflow-hidden border border-neutral-700 shadow-lg bg-neutral-900/60 h-full w-full relative ${className}`}
23
      style={{ minWidth: '150px', minHeight: '200px' }}
24
      {...props}
25
    >
26
      {/* Browser Header */}
27
      <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-700 w-full">
28
        {/* Traffic Light Buttons */}
29
        <div className="flex space-x-2">
30
          <div className="w-3 h-3 rounded-full bg-red-500" />
31
          <div className="w-3 h-3 rounded-full bg-yellow-500" />
32
          <div className="w-3 h-3 rounded-full bg-green-500" />
33
        </div>
34

35
        {/* URL Bar (optional, for decoration) */}
36
        <div className="flex-1 mx-4">
37
          <div className="h-6 bg-neutral-600 rounded-md w-full flex items-center justify-center">
38
            <p className="text-xs text-neutral-300">{url}</p>
39
          </div>
40
        </div>
41
      </div>
42

43
      {/* Browser Content */}
44
      <div className={`w-full flex-1 p-2 flex items-center justify-center ${childrenClassName}`}>
45
        {children}
46
      </div>
47
    </div>
48
  );
49
};
50

51
export default BrowserWindow;