import type { ReactNode } from "react";

interface RecipeCreateFormWrapperProps {
  label: string;
  name: string;
  desc: string;
  required: boolean;
  parentClasses: string;
  children: ReactNode;
}

export default function RecipeCreateFormWrapper({ label, name, desc, required = false, parentClasses, children }: RecipeCreateFormWrapperProps) {
  const normalized_name = name.toLowerCase().replaceAll(" ", "-");

  return (
    <div className={`flex flex-col ${parentClasses}`}>
      <label htmlFor={normalized_name} className="text-sm">
        {label}
        {required && <span className="text-red-500">*</span>}
      </label>
      <p className="text-xs py-1 text-gray-700">
        {desc}
      </p>
      {children}
    </div>
  );
}

