import ButtonSecondary from "../buttons/ButtonSecondary";
import IconEmptyResults from "~/components/ui/icons/IconEmptyResults";
import clsx from "clsx";
import { PlusIcon, ReloadIcon } from "~/components/ui/icons/vendor";

interface Captions {
  description?: string;
  thereAreNo?: string;
  new?: string;
}

interface Props {
  className?: string;
  captions: Captions;
  to?: string;
  icon?: string;
  onClick?: () => void;
}

export default function EmptyState({ className, captions, to, icon, onClick }: Props) {
  return (
    // Subframe EmptyState layout: centered column, px-4 py-8, gap-6 stack, gap-4 text block, 48px icon, body-large title / body-default body
    <div className={clsx(className, "border-border-default flex flex-col items-center gap-6 rounded-md border-2 border-dashed px-4 py-8 text-center")}>
      <IconEmptyResults className="h-12 w-12" />
      <div className="flex max-w-[384px] flex-col items-center gap-4">
        <h3 className="text-body-large-0 font-body-large-0 text-text-neutral-primary">{captions.thereAreNo}</h3>
        {captions.description && (
          <p className="text-text-neutral-secondary text-body-default-regular-150 font-body-default-regular-150">{captions.description}</p>
        )}
      </div>
      {captions.new && (
        <div>
          {(() => {
            if (to) {
              return (
                <ButtonSecondary to={to}>
                  {(() => {
                    if (icon === "plus") {
                      return <PlusIcon className="h-4 w-4" />;
                    } else if (icon === "refresh") {
                      return <ReloadIcon className="h-4 w-4" />;
                    } else {
                      return null;
                    }
                  })()}
                  <div>{captions.new}</div>
                </ButtonSecondary>
              );
            } else {
              return (
                <ButtonSecondary onClick={onClick} type="button">
                  {icon === "plus" && <PlusIcon className="h-4 w-4" />}
                  <div>{captions.new}</div>
                </ButtonSecondary>
              );
            }
          })()}
        </div>
      )}
    </div>
  );
}