ERitors-Scribe-Desktop/components/form/InputField.tsx

import React from "react";
import {LucideIcon, Plus, Trash2} from "lucide-react";
import IconButton from "@/components/ui/IconButton";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";

interface InputFieldProps {
    icon?: LucideIcon;
    fieldName?: string;
    input: React.ReactNode;
    addButtonCallBack?: () => Promise<void>;
    removeButtonCallBack?: () => Promise<void>;
    isAddButtonDisabled?: boolean;
    action?: () => Promise<void>;
    actionLabel?: string;
    actionIcon?: LucideIcon;
    hint?: string;
    centered?: boolean;
}

export default function InputField(
    {
        fieldName,
        icon,
        input,
        addButtonCallBack,
        removeButtonCallBack,
        isAddButtonDisabled,
        action,
        actionLabel,
        actionIcon,
        hint,
        centered = false
    }: InputFieldProps) {
    
    function renderIcon(): React.JSX.Element | null {
        if (!icon) return null;
        const Icon: LucideIcon = icon;
        return <Icon className="text-primary w-5 h-5" strokeWidth={1.75}/>;
    }

    return (
        <div className={`flex flex-col ${centered ? 'items-center' : ''}`}>
            <div
                className={`flex items-center mb-2 lg:mb-3 flex-wrap gap-2 ${centered ? 'justify-center' : 'justify-between'}`}>
                {fieldName && (
                    <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2">
                        {renderIcon()}
                        {fieldName}
                    </h3>
                )}
                {action && actionIcon && (
                    <Button variant="secondary" size="sm" icon={actionIcon} onClick={action}>
                        {actionLabel && <span>{actionLabel}</span>}
                    </Button>
                )}
                {hint && (
                    <Badge variant="muted" size="sm">{hint}</Badge>
                )}
            </div>
            <div className={`flex items-center gap-2 ${centered ? 'justify-center' : 'justify-between'}`}>
                {input}
                {addButtonCallBack && (
                    <IconButton
                        icon={Plus}
                        variant="ghost"
                        shape="square"
                        onClick={addButtonCallBack}
                        disabled={isAddButtonDisabled}
                    />
                )}
                {removeButtonCallBack && (
                    <IconButton
                        icon={Trash2}
                        variant="danger"
                        shape="square"
                        onClick={removeButtonCallBack}
                    />
                )}
            </div>
        </div>
    )
}