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";
import type { ChecklistItemKey } from "../../shared/types";

interface DashboardEmptyStateProps {
  checklist: Checklist;
  budgetReady: boolean;
  /** The visit steps are initialized (#425): their rows stay "pending" until then. */
  visitStepsInitialized: boolean;
  /** The user dismissed the checklist: the welcome card stays, the list goes. */
  hidden: boolean;
  onHide: () => void;
  /** "Resume" on a skipped row of the list (#397). */
  onResume: (key: ChecklistItemKey) => void;
}

/**
 * Dashboard of a profile without any transaction (#352): a welcome card with
 * the detailed getting-started checklist and one primary action towards the
 * import page, in place of widgets showing 0 $. The getting-started banner
 * stays off this page (D11): the card already holds the list.
 */
export default function DashboardEmptyState({
  checklist,
  budgetReady,
  visitStepsInitialized,
  hidden,
  onHide,
  onResume,
}: 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}
          budgetReady={budgetReady}
          visitStepsInitialized={visitStepsInitialized}
          onHide={onHide}
          onResume={onResume}
        />
      )}
    </EmptyState>
  );
}