import { reportsDict } from "@/features/reports/dict";
import {
  formatRating,
  type MoodDescriptionEntry,
} from "@/features/reports/utils/mood-chart-data";

type MoodDescriptionListProps = {
  entries: MoodDescriptionEntry[];
};

export function MoodDescriptionList({ entries }: MoodDescriptionListProps) {
  if (entries.length === 0) {
    return null;
  }

  return (
    <div className="mt-6 border-t border-border pt-5">
      <h3 className="mb-3 text-sm font-semibold text-card-foreground">
        {reportsDict.moodNotesTitle}
      </h3>

      <ul className="flex flex-col gap-3">
        {entries.map((entry) => (
          <li
            key={entry.localDate}
            className="flex flex-col gap-2 rounded-2xl bg-muted/40 px-4 py-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4"
          >
            <p className="min-w-0 flex-1 text-sm leading-7 text-foreground">
              {entry.description}
            </p>

            <div className="shrink-0 text-start sm:text-end">
              <p className="text-xs font-semibold text-card-foreground">
                {entry.weekdayLabel}
              </p>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {entry.jalaliDateLabel}
              </p>
              <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground sm:justify-end">
                <span>
                  {reportsDict.legendDayRating}: {formatRating(entry.dayRating)}
                </span>
                <span>
                  {reportsDict.legendEnergy}: {formatRating(entry.energyLevel)}
                </span>
                <span>
                  {reportsDict.legendMood}: {formatRating(entry.mood)}
                </span>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}