import { Link } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Settings as SettingsIcon, Lock as LockIcon, Bell as BellIcon, Key as KeyIcon, Trash2 as Trash2Icon } from 'lucide-react';

interface SettingsNavItem {
  title: string;
  description: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
}

const settingsNav: SettingsNavItem[] = [
  {
    title: 'Profile',
    description: 'Update your personal information',
    href: '/settings/profile',
    icon: SettingsIcon
  },
  {
    title: 'Password',
    description: 'Change your account password',
    href: '/settings/password',
    icon: LockIcon
  },
  {
    title: 'Notifications',
    description: 'Manage email and push notifications',
    href: '/settings/notifications',
    icon: BellIcon
  },
  {
    title: 'API Keys',
    description: 'Manage your API access keys',
    href: '/settings/api-keys',
    icon: KeyIcon
  },
  {
    title: 'Account',
    description: 'Delete account or export data',
    href: '/settings/account',
    icon: Trash2Icon
  }
];

export function SettingsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-4xl mx-auto grid grid-cols-[250px_1fr] gap-6">
        {/* Sidebar */}
        <aside className="space-y-4">
          <div className="flex items-center space-x-3 mb-6">
            <div className="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
              <SettingsIcon className="h-5 w-5" />
            </div>
            <div>
              <h2 className="font-semibold">Settings</h2>
              <p className="text-sm text-muted-foreground">Manage your account</p>
            </div>
          </div>
          
          <nav className="space-y-2">
            {settingsNav.map((item, index) => (
              <Link
                key={index}
                to={item.href}
                className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium 
                ${window.location.pathname === item.href ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted/50'}`}
              >
                <item.icon className="h-4 w-4" />
                <div>
                  <div className="flex justify-between">
                    <span>{item.title}</span>
                    <span className="text-xs text-muted-foreground">{item.description}</span>
                  </div>
                </div>
              </Link>
            ))}
          </nav>
        </aside>

        {/* Main Content */}
        <main>
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">{settingsNav.find(nav => nav.href === window.location.pathname)?.title || 'Settings'}</CardTitle>
            </CardHeader>
            <CardContent>{children}</CardContent>
          </Card>
        </main>
      </div>
    </div>
  );
}
