import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
        <p className="text-muted-foreground">
          Configuration du dashboard Cercle GPT
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Connexion MongoDB</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">Statut:</span>
                <Badge variant="default">Connecté</Badge>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">
                  Base de données:
                </span>
                <span className="text-sm font-mono">Cercle GPT</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">
                  Collections:
                </span>
                <span className="text-sm">29 collections</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Informations système</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">
                  Version Next.js:
                </span>
                <span className="text-sm">15.5.4</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">
                  Version Node.js:
                </span>
                <span className="text-sm">{process.version}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">
                  Environnement:
                </span>
                <Badge variant="outline">{process.env.NODE_ENV}</Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}