import "./style.pcss";

import type { FC, ReactElement } from "react";
import type { IComponentBaseProps } from "#package/types";
import type { IPalette } from "./config/types";
import { useCN } from "../../utils/react/useCN";

const baseColors: IPalette["items"] = [
  {
    color: "#fff",
    label: "white",
  },
  {
    color: "#000",
    label: "black",
  },
];

/**
 * Компонент палитры
 * @returns {ReactElement}

 */
const Palette: FC<IPalette & IComponentBaseProps> = ({
  baseClass = "palette",
  extraClasses = {},
  items = baseColors,
  children = null,
  extraAttrs = {},
}): ReactElement => {

  const { getCN } = useCN(baseClass);

  const colors = (Array.isArray(items) && items.length) ? items : baseColors;

  return (
    <div role={"presentation"} className={getCN("", extraClasses)} {...extraAttrs}>
      {children || colors.map(({ color = "", label = "" }) => {
        return (
          <div key={`${color}_${label}`} className={getCN("item")}>
            <div className={getCN("bg")} style={{ backgroundColor: color, border: "1px solid rgba(0,0,0,.5)" }} />
            <div className={getCN("label")}>
              {!!label && <b>{label}</b>}
              {color.toString()}
            </div>
          </div>
        );
      })}
    </div>
  );

};

export type { IPalette };
export { Palette };