import { Upload } from 'lucide-react';

interface WelcomeScreenProps {
  onOpenFile: () => void;
}

export function WelcomeScreen({ onOpenFile }: WelcomeScreenProps) {
  return (
    <div
      data-testid="welcome-screen"
      style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        pointerEvents: 'none',
        zIndex: 5,
      }}
    >
      <div
        style={{
          textAlign: 'center',
          color: '#888',
          fontFamily: 'monospace',
          pointerEvents: 'auto',
        }}
      >
        <Upload size={48} style={{ marginBottom: 16, opacity: 0.5 }} />
        <div style={{ fontSize: 18, marginBottom: 8 }}>MeshLab Web</div>
        <div style={{ fontSize: 13, marginBottom: 16 }}>
          Drag &amp; drop a file or click to open
        </div>
        <div style={{ fontSize: 11, color: '#666', marginBottom: 16 }}>
          20+ formats: OBJ, STL, PLY, glTF/GLB, FBX, USDZ, DAE, 3MF, and more
        </div>
        <button
          onClick={onOpenFile}
          style={{
            padding: '8px 24px',
            background: '#4a90d9',
            color: '#fff',
            border: 'none',
            borderRadius: 4,
            cursor: 'pointer',
            fontSize: 13,
            fontFamily: 'monospace',
          }}
        >
          Open File
        </button>
      </div>
    </div>
  );
}
