import { Link } from 'react-router-dom';
import { useAppSettings } from '../../context/AppSettingsContext';
import Card from '../../components/ui/Card';
import Select from '../../components/ui/Select';
import { ArrowLeft, Eye } from 'lucide-react';

const scrollThresholdOptions = [
  { value: '0.1', label: '10%' },
  { value: '0.2', label: '20%' },
  { value: '0.3', label: '30%' },
  { value: '0.4', label: '40%' },
  { value: '0.5', label: '50%' },
  { value: '0.6', label: '60%' },
  { value: '0.7', label: '70% (Standard)' },
  { value: '0.8', label: '80%' },
  { value: '0.9', label: '90%' },
  { value: '999', label: 'Deaktiviert' },
];

export default function ViewSettings() {
  const { settings, updateSettings } = useAppSettings();

  return (
    <div>
      <div className="flex items-center gap-4 mb-6">
        <Link
          to="/settings"
          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
        >
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <div className="flex items-center gap-3">
          <Eye className="w-6 h-6" />
          <h1 className="text-2xl font-bold">Ansicht</h1>
        </div>
      </div>

      <Card title="Scroll-Verhalten">
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="font-medium">Nach-oben-Button</p>
              <p className="text-sm text-gray-500">
                Ab welcher Scroll-Position der Button unten rechts erscheinen soll
              </p>
            </div>
            <div className="w-48">
              <Select
                options={scrollThresholdOptions}
                value={settings.scrollToTopThreshold.toString()}
                onChange={(e) => updateSettings({ scrollToTopThreshold: parseFloat(e.target.value) })}
              />
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}