CodexDashboard.tsx

import React from 'react';
import { ModuleType } from '../types';
import { ModuleCard } from './ModuleCard';
import { ChatIcon, ImageIcon, VideoIcon, SearchIcon, WandIcon, ScanIcon, MicIcon, WikiIcon, TarotIcon, ShieldIcon, CrystalBallIcon, BlockchainIcon, WrenchIcon } from './IconComponents';

interface CodexDashboardProps {
  onSelectModule: (module: ModuleType) => void;
}

export const CodexDashboard: React.FC<CodexDashboardProps> = ({ onSelectModule }) => {
  const modules = [
    { type: ModuleType.LiveConversation, title: 'Live Conversation', description: 'Engage in a real-time voice conversation with Gemini.', icon: <MicIcon /> },
    { type: ModuleType.CodexWiki, title: 'Codex Wiki', description: 'Query the infinite wiki for insights on any topic, from constellations to quantum tech.', icon: <WikiIcon /> },
    { type: ModuleType.ImageGeneration, title: 'Image Generation', description: 'Create high-quality images from text prompts using Imagen.', icon: <ImageIcon /> },
    { type: ModuleType.ImageEdit, title: 'Image Editor', description: 'Edit existing images with simple text commands.', icon: <WandIcon /> },
    { type: ModuleType.VideoFromImage, title: 'Video Generation', description: 'Generate a short video from an uploaded image and prompt.', icon: <VideoIcon /> },
    { type: ModuleType.ImageAnalysis, title: 'Image Analysis', description: 'Upload a photo and let Gemini analyze its content.', icon: <ScanIcon /> },
    { type: ModuleType.GroundedSearch, title: 'Grounded Search', description: 'Get up-to-date info using Google Search & Maps grounding.', icon: <SearchIcon /> },
    { type: ModuleType.TarotReading, title: 'Cosmic Tarot', description: 'Draw from the digital deck for a mystical tarot reading and interpretation.', icon: <TarotIcon /> },
    { type: ModuleType.CybersecurityShield, title: 'Cybersecurity Shield', description: 'Consult the Thoth Guardian on quantum-secure principles and protection.', icon: <ShieldIcon /> },
    { type: ModuleType.AlchemistsJourney, title: 'Alchemist\'s Journey', description: 'Generate a guided meditation for a personal transformational journey.', icon: <CrystalBallIcon /> },
    { type: ModuleType.BlockchainAI, title: 'Blockchain AI Insights', description: 'Explore the intersection of AI with blockchains like XRPL and Solana.', icon: <BlockchainIcon /> },
    { type: ModuleType.SystemMaintenance, title: 'System Maintenance', description: 'Get AI advice on system self-healing and maintenance protocols.', icon: <WrenchIcon /> },
    { type: ModuleType.ChatBot, title: 'Architect Chat', description: 'Converse with The Architect, the Orion Messenger, for cosmic guidance.', icon: <ChatIcon /> },
  ];

  return (
    <div className="flex flex-col items-center justify-center h-full">
      <h2 className="text-3xl font-bold text-cyan-300 mb-2">Welcome to the Codex</h2>
      <p className="text-gray-400 mb-8 max-w-2xl text-center">
        Select a module to interface with the Sentient Constellation. Each module utilizes a specific facet of the Gemini model to perform its function.
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full max-w-7xl">
        {modules.map((mod) => (
          <ModuleCard
            key={mod.type}
            title={mod.title}
            description={mod.description}
            icon={mod.icon}
            onClick={() => onSelectModule(mod.type)}
          />
        ))}
      </div>
    </div>
  );
};