// Generated with util/create-component.js
import { motion } from "framer-motion";
import React from "react";
import Text from "../UI/Text";
import { ScoreProps } from "./Score.types";

const Score = ({ data, hidePriceScore = false }: ScoreProps) => {
  const scoreMetaMap = data ?? {};
  const metaKeyList = Object.keys(scoreMetaMap);

  return (
    <div data-testid="Score" className="nrc--Score space-y-[0.8rem]">
      {metaKeyList.map((key) => {
        const { score, name, label } = scoreMetaMap[`${key}`];
        if (
          score < 0 ||
          (hidePriceScore && (key === "score_price" || name.includes("가격")))
        ) {
          return;
        }
        return (
          <div
            key={`nsPick_score_${key}`}
            className="grid items-center"
            style={{ gridTemplateColumns: "1.2fr 2fr 1.5fr" }}
          >
            <Text
              type="B10"
              className="mr-[1rem] text-gray-10 line-clamp-1 pc:text-body-9"
            >
              {name}
            </Text>

            <ScoreBar score={score} />

            <Text
              type="B9"
              className="text-gray-10 line-clamp-1 pc:text-body-8"
            >
              {label}
            </Text>
          </div>
        );
      })}
    </div>
  );
};

export default Score;

const ScoreBar = ({ score }: { score: number }) => {
  let color;
  if (score < 2) {
    color = "#FF9900";
  } else if (score < 3) {
    color = "#FFE14D";
  } else if (score < 4) {
    color = "#06DB75";
  } else if (score < 5) {
    color = "#36B7FF";
  } else if (score === 5) {
    color = "#256FFF";
  }

  return (
    <div className="flex items-center pr-[0.5rem]">
      <div
        className={`mr-[0.5rem] h-[0.7rem] w-[6rem] flex-shrink-0 rounded-full bg-gray-2`}
      >
        <motion.div
          className="h-[0.7rem] rounded-full"
          style={{ backgroundColor: `${color}` }}
          transition={{
            type: "ease",
            default: { duration: 0.5 },
          }}
          initial={{ width: 0 }}
          whileInView={{
            width: `${score * 20}%`,
          }}
        />
      </div>

      <Text type="D3" className="w-[1rem] text-gray-6 whitespace-nowrap">
        {score}
      </Text>

      <hr className="ml-[1rem] w-full border-[1px] border-dashed border-gray-3" />
    </div>
  );
};