'use client';

import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
  User,
  Palette,
  Bell,
  Shield,
  ChevronRight,
  type LucideIcon,
} from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

interface SettingsLink {
  href: string;
  icon: LucideIcon;
  titleKey: string;
  descriptionKey: string;
}

const settingsLinks: SettingsLink[] = [
  {
    href: '/settings/profile',
    icon: User,
    titleKey: 'profileTitle',
    descriptionKey: 'profileDescription',
  },
  {
    href: '/settings/preferences',
    icon: Palette,
    titleKey: 'preferencesTitle',
    descriptionKey: 'preferencesDescription',
  },
  {
    href: '/settings/notifications',
    icon: Bell,
    titleKey: 'notificationsTitle',
    descriptionKey: 'notificationsDescription',
  },
  {
    href: '/settings/security',
    icon: Shield,
    titleKey: 'securityTitle',
    descriptionKey: 'securityDescription',
  },
];

interface SettingsContentProps {
  locale: string;
}

/**
 * Settings overview page - Shows all settings categories
 */
export function SettingsContent({ locale }: SettingsContentProps) {
  const t = useTranslations('settings');

  return (
    <div className="space-y-6">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
      >
        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
        <p className="text-muted-foreground">{t('subtitle')}</p>
      </motion.div>

      {/* Settings Grid */}
      <div className="grid gap-4 md:grid-cols-2">
        {settingsLinks.map((link, index) => {
          const Icon = link.icon;

          return (
            <motion.div
              key={link.href}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
            >
              <Link href={`/${locale}${link.href}`}>
                <Card className="group cursor-pointer transition-colors hover:border-primary/50 hover:bg-muted/50">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
                          <Icon className="h-5 w-5 text-primary" />
                        </div>
                        <div>
                          <CardTitle className="text-lg">{t(link.titleKey)}</CardTitle>
                          <CardDescription>{t(link.descriptionKey)}</CardDescription>
                        </div>
                      </div>
                      <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                    </div>
                  </CardHeader>
                </Card>
              </Link>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}
