// Generated with util/create-component.js
import React from "react";
import Label from "../Label";
import { PickLabelProps } from "./PickLabel.types";

const PickLabel: React.FC<PickLabelProps> = ({
  type,
  pickType,
  categoryKr,
  labelStyle,
}) => {
  const { color, kr, imgName } = pickTypeKoreanColorMap[pickType];

  if (!color || !kr || !imgName) {
    return null;
  }

  if (type === "label") {
    return (
      <Label
        className={`nrc--PickLabel text-white ${color} ${labelStyle}`}
        size="s"
        aria-label="노써치픽"
      >
        {categoryKr && (
          <span className="mobile:hidden inline-block mr-[0.3rem]">
            {categoryKr}
          </span>
        )}
        {kr}픽
      </Label>
    );
  } else {
    return (
      <div
        className={`nrc--PickLabel ${type === "circleLabel" &&
          "rounded-full"} ${labelStyle}`}
      >
        <img
          src={`/static/images/${imgName}${
            type === "squareLabel" ? "_rectangle" : ""
          }.png`}
        />
      </div>
    );
  }
};

export default PickLabel;

const pickTypeKoreanColorMap = {
  best: {
    kr: "베스트",
    color: "bg-blue-7",
    imgName: "pick_best",
  },
  plus: {
    kr: "플러스",
    color: "bg-blue-6",
    imgName: "pick_plus",
  },
  premium: {
    kr: "프리미엄",
    color: "bg-violet",
    imgName: "pick_premium",
  },
  cost_effective: {
    kr: "가성비",
    color: "bg-green",
    imgName: "pick_cost_effective",
  },
  none: {
    kr: "",
    color: "",
    imgName: "",
  },
};