import type { Grade } from "@/lib/types";
import styles from "./GradeBadge.module.css";

interface GradeBadgeProps {
  grade: Grade;
}

export function GradeBadge({ grade }: GradeBadgeProps) {
  const tone =
    grade === "◎" || grade === "○" ? "ok" : grade === "△" ? "wn" : "ng";
  return (
    <span className={`${styles.badge} ${styles[tone]}`} data-tone={tone}>
      {grade}
    </span>
  );
}