/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React from "react";
import RoundedInput from "@/components/elements/RoundedInput";
import SelectBox from "@/components/elements/SelectBox";
import { IAdvertisingCategory } from "@/types/types";
import { useTranslation } from "react-i18next";

interface ProfileBasicFieldsProps {
  formik: any;
  categories: IAdvertisingCategory[];
}

const ProfileBasicFields: React.FC<ProfileBasicFieldsProps> = ({
  formik,
  categories,
}) => {
  const { t } = useTranslation("common");

  return (
    <>
      <RoundedInput
        className="max-w-full"
        type="text"
        placeholder={t("settings.billboards.titlePlaceholder")}
        {...formik.getFieldProps("vitrine_name")}
      />
      <SelectBox
        className="max-w-full mt-2"
        value={formik.values.categoryId}
        onChange={(e) =>
          formik.setFieldValue("categoryId", e.target.value)
        }
      >
        <option disabled value="">
          {t("settings.billboards.category")}
        </option>
        {categories.map((item: IAdvertisingCategory) => (
          <option key={item._id} value={item.title}>
            {item.title}
          </option>
        ))}
      </SelectBox>
      <textarea
        className="w-full p-4 mt-2 h-24 rounded-3xl border border-border-primary-light dark:border-border-primary-dark bg-secondary-light dark:bg-secondary-dark font-medium"
        placeholder={t("settings.billboards.aboutUs")}
        {...formik.getFieldProps("about_us")}
      ></textarea>
    </>
  );
};

export default ProfileBasicFields;
