import { createFileRoute } from '@tanstack/react-router';
import { Settings } from 'lucide-react';
import { PageLayout } from '@/components/shared';

/**
 * SettingsPage Component
 *
 * Settings page for configuring application preferences and options.
 * Uses DashboardLayout for consistent two-column structure.
 */

function SettingsPage() {
  return (
    <PageLayout
      title="Settings"
      subtitle="Configure application preferences and options"
      icon={<Settings size={24} />}
      gradient={true}
    >
        <div className="bg-card rounded-lg border border-border p-8 shadow-sm text-center">
          <Settings className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-semibold text-foreground mb-2">
            Settings Interface
          </h3>
          <p className="text-muted-foreground">
            Settings interface coming soon
          </p>
        </div>

        {/* Future Settings Categories Placeholder */}
        <div className="mt-8 space-y-4">
          <div className="bg-card rounded-lg border border-border p-6 shadow-sm">
            <h3 className="text-lg font-semibold text-foreground mb-2">
              General Settings
            </h3>
            <p className="text-sm text-muted-foreground">
              Application-wide preferences and configurations
            </p>
          </div>

          <div className="bg-card rounded-lg border border-border p-6 shadow-sm">
            <h3 className="text-lg font-semibold text-foreground mb-2">
              Security Settings
            </h3>
            <p className="text-sm text-muted-foreground">
              Security and authentication configurations
            </p>
          </div>

          <div className="bg-card rounded-lg border border-border p-6 shadow-sm">
            <h3 className="text-lg font-semibold text-foreground mb-2">
              Notification Settings
            </h3>
            <p className="text-sm text-muted-foreground">
              Email and notification preferences
            </p>
          </div>
        </div>
    </PageLayout>
  );
}

export const Route = createFileRoute('/_authenticated/dashboard/settings')({
  component: SettingsPage,
});