import React, { FC } from "react";
import {
  chuni_profile_rating,
  chuni_static_music,
} from "@/prisma/schemas/artemis/generated/artemis";
import { getDifficultyText } from "@/lib/helpers";

type userRatingBaseList = {
  title: string;
  artist: string;
  genre: string;
  chartId: number;
  level: string | number;
  jacketPath: string;
  rating: number;
  version: number;
  index: number;
  musicId: number | null;
  difficultId: string;
  score: number | null;
};

type ChunithmProfileRecentPlays = {
  chuniProfileRecentPlays: {
    recentRating: userRatingBaseList[];
  };
};
export const ChunithmRecentPlays: FC<ChunithmProfileRecentPlays> = ({
  chuniProfileRecentPlays,
}) => {
  return (
    <div>
      {chuniProfileRecentPlays.recentRating.map(
        (playersRecentRatingList, index) => {
          const jacketPath = playersRecentRatingList.jacketPath?.replace(
            ".dds",
            ".png",
          );

          return (
            <div key={index} className="center flex p-2">
              <div className="m-4 font-bold">{index + 1}.</div>
              {jacketPath && (
                <img
                  src={`/JacketArt/${jacketPath}`}
                  alt="Jacket"
                  style={{ width: "120px", height: "120px" }}
                />
              )}
              <div>
                <ul className="pl-2">
                  <li>
                    <strong>Title: </strong> {playersRecentRatingList.title}
                  </li>
                  <li>
                    <strong>Level: </strong> {playersRecentRatingList.level}
                  </li>
                  <li>
                    <strong>Difficulty: </strong>
                    {getDifficultyText(playersRecentRatingList.chartId)}
                  </li>
                  <li>
                    <strong>Score: </strong>{" "}
                    {playersRecentRatingList.score?.toLocaleString()}
                  </li>
                  <li>
                    <strong>Rating: </strong>{" "}
                    {(playersRecentRatingList.rating / 100).toFixed(2)}
                  </li>
                </ul>
              </div>
            </div>
          );
        },
      )}
    </div>
  );
};