ClaudeAI - Mock Win Interface Version 1

import React, { useState } from 'react';
import { X, Minus, Square } from 'lucide-react';

const Windows95Interface = () => {
  const [windows, setWindows] = useState([
    { id: 1, title: 'My Computer', x: 20, y: 20, width: 300, height: 200, minimized: false },
    { id: 2, title: 'Notepad', x: 100, y: 100, width: 250, height: 180, minimized: false },
  ]);

  const [activeWindow, setActiveWindow] = useState(null);
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });

  const handleMouseDown = (e, id) => {
    setActiveWindow(id);
    setDragStart({ x: e.clientX, y: e.clientY });
  };

  const handleMouseMove = (e) => {
    if (activeWindow !== null) {
      const dx = e.clientX - dragStart.x;
      const dy = e.clientY - dragStart.y;
      setWindows(windows.map(w =>
        w.id === activeWindow
          ? { ...w, x: w.x + dx, y: w.y + dy }
          : w
      ));
      setDragStart({ x: e.clientX, y: e.clientY });
    }
  };

  const handleMouseUp = () => {
    setActiveWindow(null);
  };

  const minimizeWindow = (id) => {
    setWindows(windows.map(w =>
      w.id === id ? { ...w, minimized: !w.minimized } : w
    ));
  };

  const closeWindow = (id) => {
    setWindows(windows.filter(w => w.id !== id));
  };

  return (
    <div
      className="bg-teal-700 w-full h-screen relative overflow-hidden"
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      {windows.map(window => (
        <div
          key={window.id}
          className={`absolute bg-gray-200 border-2 border-gray-400 shadow-lg ${window.minimized ? 'hidden' : ''}`}
          style={{
            left: `${window.x}px`,
            top: `${window.y}px`,
            width: `${window.width}px`,
            height: `${window.height}px`,
            zIndex: activeWindow === window.id ? 10 : 1
          }}
        >
          <div
            className="bg-blue-900 text-white px-2 py-1 flex justify-between items-center cursor-move"
            onMouseDown={(e) => handleMouseDown(e, window.id)}
          >
            <span>{window.title}</span>
            <div className="flex space-x-1">
              <button onClick={() => minimizeWindow(window.id)} className="focus:outline-none">
                <Minus size={16} />
              </button>
              <button className="focus:outline-none">
                <Square size={16} />
              </button>
              <button onClick={() => closeWindow(window.id)} className="focus:outline-none">
                <X size={16} />
              </button>
            </div>
          </div>
          <div className="p-2">
            {window.title === 'My Computer' ? (
              <div className="flex flex-col items-center">
                <img src="/api/placeholder/64/64" alt="My Computer" className="mb-2" />
                <span>My Computer</span>
              </div>
            ) : (
              <textarea className="w-full h-32 p-2 border border-gray-400 resize-none" placeholder="Type here..."></textarea>
            )}
          </div>
        </div>
      ))}
      <div className="absolute bottom-0 left-0 right-0 bg-gray-300 h-10 flex items-center px-2">
        <button className="bg-green-600 text-white px-4 py-1 rounded">Start</button>
      </div>
    </div>
  );
};

export default Windows95Interface;