interstellar_ai/app/components/Models.tsx

import React, { useState, useEffect } from 'react';

// Define the available model options
const offlineModels = [
  'Offline Fast',
  'Offline Fast (FOSS)',
  'Offline Slow',
  'Offline Slow (FOSS)',
];

const onlineModels = [
  'Online (La Plateforme)',
  'Online (FOSS) (La Plateforme)',
  'Online Cheap (OpenAI)',
  'Online Expensive (OpenAI)',
  'Online Cheap (Anthropic)',
  'Online Expensive (Anthropic)',
  'Online Cheap (Google)',
  'Online Expensive (Google)',
];

const fossModels = [
  'Offline Fast (FOSS)',
  'Offline Slow (FOSS)',
  'Online (FOSS) (La Plateforme)',
];

// Define the properties passed to the Models component
interface ModelsProps {
  selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
}

const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
  const [selectedModel, setSelectedModel] = useState<string>(() => {
    return localStorage.getItem('selectedModel') || 'Offline Fast';
  });

  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newModel = event.target.value;
    setSelectedModel(newModel);
  };

  const isOfflineModel = (model: string) => offlineModels.includes(model);
  const isOnlineModel = (model: string) => onlineModels.includes(model);
  const isFossModel = (model: string) => fossModels.includes(model);

  useEffect(() => {
    localStorage.setItem('selectedModel', selectedModel);
  }, [selectedModel]);

  const filteredModels = (() => {
    switch (selectedOption) {
      case 'Offline':
        return offlineModels; // Show only offline models
      case 'AI Online':
        return onlineModels; // Show only online models
      default:
        return [...offlineModels, ...onlineModels]; // Show all models
    }
  })();

  return (
    <div className="model-background">
      <div className="models">
        <div className="title">
          <h3>Different AI models</h3>
        </div>

        {/* Model Selection Dropdown */}
        <div className="model-dropdown">
          <label htmlFor="model-select">Select AI Model:</label>
          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
            {filteredModels.map((model) => (
              <option key={model} value={model}>
                {model}
              </option>
            ))}
          </select>
        </div>

        {/* Model Grid with Cards */}
        <div className="grid">
          <button className="code-model model-box">
            <div className="overlay">
              <h3>Code</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="math-model model-box">
            <div className="overlay">
              <h3>Math</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="language-model model-box">
            <div className="overlay">
              <h3>Language</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="character-model model-box">
            <div className="overlay">
              <h3>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="financial-model model-box">
            <div className="overlay">
              <h3>Finance</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="weather-model model-box">
            <div className="overlay">
              <h3>Weather</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="time-planner-model model-box">
            <div className="overlay">
              <h3>Time</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="image-model model-box">
            <div className="overlay">
              <h3>Image</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="default-model model-box">
            <div className="overlay"> 
              <h3>Custom1</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="default-model model-box">
            <div className="overlay"> 
              <h3>Custom2</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Models;