'use client'

import { INTERNET_REQUIRED_ACTIONS } from '../constants'

export default function InternetStatus({ internet }: { internet?: boolean }) {
  return (
    <div className={`rounded-xl border p-4 mb-6 ${
      internet
        ? 'bg-green-50 border-green-200'
        : 'bg-amber-50 border-amber-200'
    }`}>
      <div className="flex items-start justify-between">
        <div className="flex gap-3">
          <span className="text-2xl">{internet ? '🌐' : '📴'}</span>
          <div>
            <h3 className={`font-semibold ${internet ? 'text-green-900' : 'text-amber-900'}`}>
              Internet: {internet ? 'Verbunden' : 'Offline (Normalbetrieb)'}
            </h3>
            <p className={`text-sm mt-1 ${internet ? 'text-green-700' : 'text-amber-700'}`}>
              {internet
                ? 'Mac Mini hat Internet-Zugang. LLM-Downloads und Updates möglich.'
                : 'Mac Mini arbeitet offline. Für bestimmte Aktionen muss Internet aktiviert werden.'}
            </p>
          </div>
        </div>
        <span className={`px-3 py-1 rounded-full text-sm font-semibold ${
          internet
            ? 'bg-green-100 text-green-800'
            : 'bg-amber-100 text-amber-800'
        }`}>
          {internet ? 'Online' : 'Offline'}
        </span>
      </div>

      {!internet && (
        <div className="mt-4 pt-4 border-t border-amber-200">
          <h4 className="font-medium text-amber-900 mb-2">⚠️ Diese Aktionen benötigen Internet:</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
            {INTERNET_REQUIRED_ACTIONS.map((item, idx) => (
              <div key={idx} className="flex items-start gap-2 text-sm">
                <span className="text-amber-600 mt-0.5">•</span>
                <div>
                  <span className="font-medium text-amber-800">{item.action}</span>
                  <span className="text-amber-600 ml-1">– {item.description}</span>
                </div>
              </div>
            ))}
          </div>
          <p className="text-xs text-amber-600 mt-3 italic">
            💡 Tipp: Internet am Router/Switch nur bei Bedarf für den Mac Mini aktivieren.
          </p>
        </div>
      )}
    </div>
  )
}