import ActivityFeed from "@/components/account/ActivityFeed";
import { getAccountActivities } from "@/actions/activities";
import { Info } from "lucide-react";
import React from "react";

export const dynamic = "force-dynamic";

const accountPage = async () => {
  const response = await getAccountActivities({ limit: 10 });
  const activities = response.success ? response.data : [];

  return (
    <div className="flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex flex-col gap-1.5">
        <h2 className="text-xl font-bold tracking-tight">Übersicht</h2>
        <p className="text-sm text-muted-foreground">Hier findest du deine neuesten Benachrichtigungen und Kontoaktivitäten.</p>
      </div>
      
      <div className="mt-2">
        {activities.length > 0 ? (
          <ActivityFeed items={activities as any} />
        ) : (
          <div className="flex flex-col items-center justify-center py-16 text-center rounded-xl border border-dashed border-border/60 bg-muted/20">
            <div className="rounded-full bg-muted p-4 mb-4">
              <Info className="w-8 h-8 text-muted-foreground/50" />
            </div>
            <h3 className="text-lg font-medium">Keine Aktivitäten</h3>
            <p className="text-sm text-muted-foreground mt-2 max-w-sm">
              Sobald du Bestellungen tätigst oder dein Profil aktualisierst, erscheinen hier deine Kontoaktivitäten.
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default accountPage;