'use client';

import { Card, CardContent } from '@/components/ui/Card';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { Emoji } from '@/components/ui/Emoji';

interface SettingsPage {
  href: string;
  icon: string;
  title: string;
  description: string;
  status: string;
}

interface SettingsNavigationProps {
  settingsPages: SettingsPage[];
}

export function SettingsNavigation({ settingsPages }: SettingsNavigationProps) {
  return (
    <div className="space-y-4">
      <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
        Sections de configuration
      </h2>
      
      <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
        {settingsPages.map((page) => (
          <Link key={page.href} href={page.href}>
            <Card className="transition-all hover:shadow-md hover:border-[var(--primary)]/30 cursor-pointer">
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-4">
                    <span className="text-3xl"><Emoji emoji={page.icon} size={30} /></span>
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-[var(--foreground)] mb-1">
                        {page.title}
                      </h3>
                      <p className="text-[var(--muted-foreground)] mb-2">
                        {page.description}
                      </p>
                      <div className="flex items-center gap-2">
                        <span className={`px-2 py-1 rounded text-xs font-medium ${
                          page.status === 'Fonctionnel' 
                            ? 'bg-[var(--success)]/20 text-[var(--success)]'
                            : page.status === 'En développement'
                            ? 'bg-[var(--warning)]/20 text-[var(--warning)]'
                            : 'bg-[var(--muted)]/20 text-[var(--muted-foreground)]'
                        }`}>
                          {page.status}
                        </span>
                      </div>
                    </div>
                  </div>
                  <ChevronRight className="w-5 h-5 text-[var(--muted-foreground)]" />
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}