import PropTypes from "prop-types";
import { motion } from "motion/react";
import clsx from "clsx";

function FormField({ label, children, icon, variant }) {
  return (
    <div className="flex items-center">
      <label className={clsx(
        "mr-20 text-lg text-black dark:text-primary-dark whitespace-nowrap", 
        variant === 'long' && "sm:w-[5%]"
      )}>
        {label}
      </label>
      <div className={clsx("flex w-full gap-4 items-center", variant === 'long' && 'gap-10')}>
        {children}
        {icon && (
            <motion.div 
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                className={clsx(icon.mode === "plain" ? "text-[#444]" : "bg-primary rounded-full p-2 text-white cursor-pointer")}
                onClick={icon.onClick}
            >
                {icon.icon}
            </motion.div>
        )}
      </div>
      
    </div>
  );
}

FormField.propTypes = {
  label: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  icon: PropTypes.object,
  variant: PropTypes.string
};

export default FormField;