import React from "react";
import { Svg } from "../Svg";
import {
  EmptyIllustrationAlert,
  EmptyIllustrationBooksCheck,
  EmptyIllustrationBulkEdit,
  EmptyIllustrationClock,
  EmptyIllustrationConfetti,
  EmptyIllustrationDocs,
  EmptyIllustrationDone,
  EmptyIllustrationFound,
  EmptyIllustrationLightning,
  EmptyIllustrationMegaphone,
  EmptyIllustrationNetwork,
  EmptyIllustrationNetworkNodes,
  EmptyIllustrationNoResults,
  EmptyIllustrationOpenQuestions,
  EmptyIllustrationPatterns,
  EmptyIllustrationStopwatch,
  EmptyIllustrationTags,
  EmptyIllustrationTeam,
  EmptyIllustrationTodo,
} from "./illustrations";

const illustrationIds = [
  "alert",
  "books-check",
  "bulk-edit",
  "clock",
  "confetti",
  "docs",
  "done",
  "found",
  "lightning",
  "megaphone",
  "network",
  "network-nodes",
  "no-results",
  "open-questions",
  "patterns",
  "stopwatch",
  "tags",
  "team",
  "todo",
] as const;

function EmptyIllustration({
  id,
  ...props
}: React.ComponentProps<typeof Svg> & {
  id: typeof illustrationIds[number];
  backgroundColor?: string;
  backgroundOpacity?: number;
}) {
  switch (id) {
    case "alert":
      return <EmptyIllustrationAlert {...props} />;
    case "books-check":
      return <EmptyIllustrationBooksCheck {...props} />;
    case "bulk-edit":
      return <EmptyIllustrationBulkEdit {...props} />;
    case "clock":
      return <EmptyIllustrationClock {...props} />;
    case "confetti":
      return <EmptyIllustrationConfetti {...props} />;
    case "docs":
      return <EmptyIllustrationDocs {...props} />;
    case "done":
      return <EmptyIllustrationDone {...props} />;
    case "found":
      return <EmptyIllustrationFound {...props} />;
    case "lightning":
      return <EmptyIllustrationLightning {...props} />;
    case "megaphone":
      return <EmptyIllustrationMegaphone {...props} />;
    case "network":
      return <EmptyIllustrationNetwork {...props} />;
    case "network-nodes":
      return <EmptyIllustrationNetworkNodes {...props} />;
    case "no-results":
      return <EmptyIllustrationNoResults {...props} />;
    case "open-questions":
      return <EmptyIllustrationOpenQuestions {...props} />;
    case "patterns":
      return <EmptyIllustrationPatterns {...props} />;
    case "stopwatch":
      return <EmptyIllustrationStopwatch {...props} />;
    case "tags":
      return <EmptyIllustrationTags {...props} />;
    case "team":
      return <EmptyIllustrationTeam {...props} />;
    case "todo":
      return <EmptyIllustrationTodo {...props} />;
    default:
      return null;
  }
}

export { EmptyIllustration };