import { Divider } from "antd";
import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
import ProText from "components/ProText";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";
import { Extra as ExtraType } from "utils/types/appTypes";
import styles from "../product.module.css";

export default function Extra({
  extrasList,
  selectedExtras,
  setSelectedExtras,
}: {
  extrasList: ExtraType[];
  selectedExtras: ExtraType[];
  setSelectedExtras: Dispatch<SetStateAction<ExtraType[]>>;
}) {
  const { t } = useTranslation();

  return (
    <>
      {extrasList.length > 0 && (
        <div>
          <Divider style={{ margin: "0 0 16px 0" }} />

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <ProText style={{ fontSize: "1.25rem" }}>
              {t("menu.youMightAlsoLike")}
            </ProText>

            <ProText strong style={{ fontSize: "0.75rem" }}>
              {t("menu.optional")}
            </ProText>
          </div>

          <ProText strong style={{ fontSize: "0.75rem" }}>
            {t("menu.choose1")}
          </ProText>

          <div className={styles.productContainer}>
            <ProCheckboxGroups
              options={extrasList.map((value) => {
                return {
                  value: value.id.toString(),
                  label: value.name,
                  price: `+${value.price}`,
                };
              })}
              value={selectedExtras.map((ex) => ex.id.toString())}
              onChange={(values) =>
                setSelectedExtras(
                  extrasList.filter((o) => values?.includes(o.id.toString())),
                )
              }
            />
          </div>
        </div>
      )}
    </>
  );
}