import { useTranslation } from "react-i18next";
import { LayoutDashboard } from "lucide-react";
import EmptyState from "../shared/EmptyState";
import OnboardingChecklist from "./OnboardingChecklist";
import type { Checklist } from "../../utils/onboardingChecklist";

interface DashboardEmptyStateProps {
  checklist: Checklist;
  budgetReady: boolean;
  /** The user dismissed the checklist: the welcome card stays, the list goes. */
  hidden: boolean;
  onHide: () => void;
}

/**
 * Dashboard of a profile without any transaction (#352): a welcome card with
 * the expanded getting-started checklist and one primary action towards the
 * import page, in place of widgets showing 0 $.
 */
export default function DashboardEmptyState({
  checklist,
  budgetReady,
  hidden,
  onHide,
}: DashboardEmptyStateProps) {
  const { t } = useTranslation();

  return (
    <EmptyState
      icon={<LayoutDashboard size={40} />}
      title={t("dashboard.empty.title")}
      description={t("dashboard.empty.description")}
      primaryAction={{ label: t("dashboard.empty.cta"), to: "/import" }}
    >
      {!hidden && (
        <OnboardingChecklist
          items={checklist.items}
          done={checklist.done}
          total={checklist.total}
          mode="expanded"
          budgetReady={budgetReady}
          onHide={onHide}
        />
      )}
    </EmptyState>
  );
}