ldc-ovoteam/resources/ts/back/Components/PageConfigs/AddNewFieldBtn.tsx

import { type VariantProps } from "class-variance-authority";
import { PlusIcon } from "lucide-react";

import type {
  ConfigInternalField,
  DynamicInternalField,
} from "@/back/types/dynamic-pages";
import { Button, type buttonVariants } from "@/components/ui/button";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface AddNewFieldBtnProps {
  className?: string;
  array?: ConfigInternalField[] | DynamicInternalField[];
  variant?: VariantProps<typeof buttonVariants>["variant"];
  limitMax?: number;
  onClick: () => void;
}

// Get a button with some informations.
export default function AddNewFieldBtn({
  className,
  array = [],
  variant = "default",
  limitMax,
  onClick,
}: Readonly<AddNewFieldBtnProps>) {
  // Translations.
  const transNoMoreChildren = trans(
    "uwil-dynamic-pages::trans.no_more_children",
  );
  const transNewField = trans("uwil-dynamic-pages::trans.new_field");
  const transEmptyWarning = trans("uwil-dynamic-pages::trans.empty_warning");
  const transEntriesCount = trans("uwil-dynamic-pages::trans.entries_count", {
    params: {
      length: String(array.length),
    },
    choice: array.length > 1 ? 2 : 1,
  });

  return (
    <div
      className={cn(
        "flex flex-col lg:flex-row justify-center lg:justify-between items-center",
        className,
      )}
    >
      {/* Check if the limit is achieved */}
      {limitMax && array.length >= limitMax ? (
        <p className="text-sm text-muted-foreground text-center">
          {transNoMoreChildren}
        </p>
      ) : (
        <Button type="button" variant={variant} onClick={onClick}>
          <PlusIcon className="w-4 h-4 m-auto" />
          {transNewField}
        </Button>
      )}
      {/* Indicate the current number of elements. */}
      <p className="text-sm text-muted-foreground text-center my-2 xl:my-0">
        {array.length > 0 ? transEntriesCount : transEmptyWarning}
      </p>
    </div>
  );
}