import { LoaderIcon } from "react-hot-toast";
import Alert from "../../../components/alert/Alert";
import Button from "../../../components/button";
import { ProfileDetailsProps } from "../../../types/props";
import ConfigItem from "./components/ConfigItem";
import ConfigItemLoading from "./components/ConfigItemLoading";
import ProfileImage from "./components/ProfileImage";
import { Fragment } from "react/jsx-runtime";

const ProductConfigList = ({
  data,
  isLoading,
  isFetching,
  error,
  userTitle,
}: ProfileDetailsProps) => {
  return (
    <div className="w-full h-full p-5 glass flex flex-col gap-3">
      <ProfileImage />
      <div className="w-full h-full flex justify-center items-center">
        <Button extra="!py-3 max-md:!py-1 max-md:px-2 !bg-gray-800 !text-white">
          {isLoading || isFetching ? (
            <LoaderIcon className="m-1.5" />
          ) : error ? (
            "error"
          ) : (
            userTitle
          )}
        </Button>
      </div>

      <p className="max-md:text-lg text-xl font-bold text-center">
        لیست کانفیگ ها
      </p>
      <div
        className="w-full h-full p-3 flex flex-col gap-3
       justify-center items-center"
      >
        {isLoading || isFetching ? (
          Array(3)
            .fill(null)
            .map((_, i) => (
              <Fragment key={i}>
                <ConfigItemLoading />
              </Fragment>
            ))
        ) : error ? (
          <Alert type="danger" message="خطایی با این موضوع رخ داد: ">
            {error.message}
          </Alert>
        ) : (
          data?.result?.configs?.map((item) => {
            return (
              <Fragment key={item.id}>
                <ConfigItem
                  configName={item.title}
                  dateBuy={item.created_at || "تاریخ نامعتبر"}
                  isDisabled={false}
                  isShowTraffic={item.show_traffic}
                  textCopy={item.url}
                />
              </Fragment>
            );
          })
        )}
      </div>
    </div>
  );
};

export default ProductConfigList;