import React from "react";
import { StatusLabelStatusT, StatusLabelTypeT } from "../../types/commonTypes";
import { StatusLabelIconPathHandler } from "../../helpers/functions";

import styles from "./StatusLabel.module.scss";

import Image from "next/image";

type ButtonT = {
  id: string;
  type?: StatusLabelTypeT;
  status: StatusLabelStatusT;
  label?: string;
  theme?: "light" | "dark";
  size?: "standart" | "min";
};

const StatusLabel = (props: ButtonT) => {
  const { id, type = "primary", size = "standart", status } = props;

  const StatusLabelClassName = styles[`${type}_${size}_label`];

  return (
    <div className={StatusLabelClassName} data-id={id}>
      <div className={styles.iconWrapper}>
        {status && type && (
          <Image
            className={styles.icon}
            src={StatusLabelIconPathHandler({ status, type })}
            alt="icon_logo"
          />
        )}
      </div>
      <p className={styles.label}>{status}</p>
    </div>
  );
};

export default StatusLabel;