import React from "react";
import FormInputMain from "../../../Components/FormInputMain";

const IODetails = ({ control, errors }) => {
  const formFields = [
    {
      label: "IO Name (English)",
      placeHolder: " ",
      name: "ioName",
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "IO Name (Arabic)",
      placeHolder: " ",
      name: "ioNameArabic",
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Description (English)",
      placeHolder: " ",
      name: "discription",
      type: "textarea",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Description (Arabic)",
      placeHolder: " ",
      name: "discriptionArabic",
      type: "textarea",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Investment Type (English)",
      placeHolder: " ",
      name: "typeName",
      type: "select",
      isRequired: true,
      section: " ",
      width: "49%",
      options: [
        {
          label: "option 1",
          value: "option 1",
        },
        {
          label: "option 2",
          value: "option 2",
        },
        {
          label: "option 3",
          value: "option 3",
        },
        {
          label: "option 4",
          value: "option 4",
        },
      ],
    },
    {
      label: "Investment Type (Arabic)",
      placeHolder: " ",
      name: "typeNameArabic",
      type: "select",
      isRequired: true,
      section: " ",
      width: "49%",
      options: [
        {
          label: "option 1",
          value: "option 1",
        },
        {
          label: "option 2",
          value: "option 2",
        },
        {
          label: "option 3",
          value: "option 3",
        },
        {
          label: "option 4",
          value: "option 4",
        },
      ],
    },
    {
      label: "Sponser Name (English)",
      placeHolder: " ",
      name: "sponserName",
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Goal Amount (English)",
      placeHolder: " ",
      name: "goalAmount",
      type: "Number",
      isRequired: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Minimum Investment Amount (English)",
      placeHolder: " ",
      name: "minInvestment",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Maximum Investment Amount (English)",
      placeHolder: " ",
      name: "maxInvestment",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Holding Period (English)",
      placeHolder: " ",
      name: "holdingPeriod",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Expected Return Estimated (English)",
      placeHolder: " ",
      name: "expectedReturn",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Closing Date (English)",
      placeHolder: " ",
      name: "closingDate",
      type: "date",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "IO Status (English)",
      placeHolder: " ",
      name: "minInvestment",
      type: "text",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
  ];

  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});

  return (
    <FormInputMain
      p={0.1}
      width={"23.8%"}
      groupedFields={groupedFields}
      control={control}
      errors={errors}
    />
  );
};

export default IODetails;
