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

function FormField({ label, children, icon }) {
  return (
    <div className="flex">
      <label className="mr-4 text-lg text-black dark:text-primary-dark md:w-[30%] xl:w-[20%] 2xl:w-[17%]">
        {label}
      </label>
      <div className="flex w-full gap-4 items-center">
        {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.isRequired,
};

export default FormField;