// * Packages
import { PlusIcon } from "lucide-react";
import { VariantProps } from "class-variance-authority";
// * Components shadcn
import { Button, buttonVariants } from "@/components/ui/button";
// * Other
import useTrans from "@/hooks/use-translations";
import {
    ConfigInternalField,
    DynamicInternalField,
} from "@/back/types/dynamic-pages";

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

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

    return (
        <div className="flex flex-col lg:flex-row justify-center lg:justify-between items-center">
            {/* 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) > 0
                    ? transEntriesCount
                    : transEmptyWarning}
            </p>
        </div>
    );
}