import type { TrainingSession } from "@/lib/store";
import BeltBadge from "@/components/ui/BeltBadge";

const defaultLevelStyle = { colorVar: "--belt-blue", iconUrl: "/images/belts/blue.png" };
const levelStyle: Record<string, { colorVar: string; iconUrl: string }> = {
  "Jugend & Erwachsene": defaultLevelStyle,
};

export default function TrainingTable({ sessions }: { sessions: TrainingSession[] }) {
  return (
    <div className="overflow-x-auto rounded-lg border border-white/10 bg-[#2a2a2a] text-cream">
      <table className="w-full min-w-[480px] text-left text-sm">
        <thead className="text-xs uppercase tracking-wide text-gray-400">
          <tr>
            <th className="px-4 py-3">Tag</th>
            <th className="px-4 py-3">Zeit</th>
            <th className="px-4 py-3">Gruppe</th>
            <th className="px-4 py-3">Level</th>
          </tr>
        </thead>
        <tbody>
          {sessions.map((s) => (
            <tr
              key={s.id}
              className="border-t border-gray-900/60 transition-colors duration-fast hover:border-l-[3px] hover:border-l-primary"
            >
              <td className="px-4 py-4 font-medium">{s.tag}</td>
              <td className="px-4 py-4">
                {s.startTime}–{s.endTime}
              </td>
              <td className="px-4 py-4">{s.gruppe}</td>
              <td className="px-4 py-4">
                <BeltBadge colorVar={(levelStyle[s.level] ?? defaultLevelStyle).colorVar} iconUrl={(levelStyle[s.level] ?? defaultLevelStyle).iconUrl} label={s.level} size="sm" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="border-t border-gray-900 px-4 py-3 text-xs text-gray-400">
        {sessions[0]?.halle ?? "Trainingshalle Arbon"}, Arbon
      </div>
    </div>
  );
}