import { useEffect } from "react";

import { usePrivilegeStore } from "@root/stores/privilegesStore";
import { requestPrivilegies } from "@root/services/privilegies.service";

import { СardPrivilegie } from "./CardPrivilegie";

export default function ListPrivilegie() {
  const privileges = usePrivilegeStore((state) => state.privileges);

  useEffect(() => {
    requestPrivilegies();
  }, []);

  return (
    <>
      {privileges.map(
        ({
          name,
          type,
          price,
          description,
          value,
          privilegeId,
          serviceKey,
          id,
          amount,
        }) => (
          <СardPrivilegie
            key={privilegeId}
            name={name}
            type={type}
            amount={1}
            price={price}
            value={value}
            privilegeId={privilegeId}
            serviceKey={serviceKey}
            description={description}
          />
        )
      )}
    </>
  );
}