import React, { useState } from 'react';

const Models: React.FC = () => {
  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');

  const modelOptions = [
    'Offline Fast',
    'Offline Fast (FOSS)',
    'Offline Slow',
    'Offline Slow (FOSS)',
    '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 handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedModel(event.target.value);
  };

  const isOfflineModel = (model: string) => {
    return model.includes('Offline');
  };

  return (
    <div className="model-background">
      <div className="models">
        <div className="titel">
          <h1>Different AI models</h1>
        </div>
        <div className="model-dropdown">
          <label htmlFor="model-select">Select AI Model:</label>
          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
            {modelOptions.map((model) => (
              <option key={model} value={model}>
                {model}
              </option>
            ))}
          </select>
        </div>
        <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>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="weather-model model-box">
            <div className="overlay">
              <h3>Character</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>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="image-model model-box">
            <div className="overlay">
              <h3>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="default-model model-box">
            <div className="overlay"> 
              <h3>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Models;