'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} />
                    </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>
  );
}
