"use client";

import dynamic from "next/dynamic";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export function DashboardCardFallback({ minHeight = "220px" }: { minHeight?: string }) {
  return (
    <Card className="h-full gap-0 overflow-hidden p-5">
      <div className="mb-6 flex flex-col gap-2">
        <Skeleton className="h-4 w-32 rounded bg-border/70" />
        <Skeleton className="h-3 w-44 rounded bg-border/50" />
      </div>
      <Skeleton
        className="w-full flex-1 rounded-lg bg-border/30"
        style={{ minHeight }}
      />
    </Card>
  );
}

export const LazyRevenueChartCard = dynamic(
  () =>
    import("./revenue-chart-card").then((mod) => ({
      default: mod.RevenueChartCard,
    })),
  {
    loading: () => <DashboardCardFallback minHeight="220px" />,
  },
);

export const LazyPipelineCard = dynamic(
  () =>
    import("./pipeline-card").then((mod) => ({
      default: mod.PipelineCard,
    })),
  {
    loading: () => <DashboardCardFallback minHeight="200px" />,
  },
);

export const LazyLeaderboardCard = dynamic(
  () =>
    import("./leaderboard-card").then((mod) => ({
      default: mod.LeaderboardCard,
    })),
  {
    loading: () => <DashboardCardFallback minHeight="280px" />,
  },
);

export const LazyActivityFeedCard = dynamic(
  () =>
    import("./activity-feed-card").then((mod) => ({
      default: mod.ActivityFeedCard,
    })),
  {
    loading: () => <DashboardCardFallback minHeight="240px" />,
  },
);

export const LazyForecastCard = dynamic(
  () =>
    import("./forecast-card").then((mod) => ({
      default: mod.ForecastCard,
    })),
  {
    loading: () => <DashboardCardFallback minHeight="320px" />,
  },
);