import React from 'react';
import type { MessageBlock } from '@/store/commStore';

import { AppWindow } from 'lucide-react';

interface MiniAppBlockProps {
  block: MessageBlock;
}

const MiniAppBlock: React.FC<MiniAppBlockProps> = ({ block }) => {
  const { app_id, config } = block.block_data;

  const appId: string = app_id || 'Unbekannt';
  const hasConfig = config && typeof config === 'object' && Object.keys(config).length > 0;

  return (
    <div className="border-2 border-dashed border-secondary-300 rounded-lg p-4 text-center bg-secondary-50">
      <div className="flex flex-col items-center gap-2">
        <AppWindow className="w-8 h-8 text-secondary-400" aria-hidden="true" strokeWidth={1.5} />
        <p className="text-sm font-medium text-secondary-600">
          Mini-App: {appId}
        </p>
        <p className="text-xs text-secondary-400">
          Mini-Apps werden in Zukunft vollständig gerendert.
        </p>
        {hasConfig && (
          <details className="text-xs text-secondary-400 mt-1">
            <summary className="cursor-pointer hover:text-secondary-600">Konfiguration</summary>
            <pre className="mt-1 p-2 rounded bg-white text-left overflow-x-auto">
              {JSON.stringify(config, null, 2)}
            </pre>
          </details>
        )}
      </div>
    </div>
  );
};

export default MiniAppBlock;
