import { TrendingUp } from 'lucide-react';

import type { DashboardContentState } from '@/business/dashboard/types';
import type { DashboardComplianceItem } from '@/shared/types/dashboard';

interface DashboardWeeklyProgressProps {
  readonly items: readonly DashboardComplianceItem[];
  readonly state: DashboardContentState;
}

export function DashboardWeeklyProgress({
  items,
  state,
}: DashboardWeeklyProgressProps) {
  return (
    <section className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
        <TrendingUp size={18} className="text-emerald-400" />
        Weekly Progress
      </h3>
      <div className="space-y-3">
        {state.isLoading ? (
          <p className="text-xs text-slate-400">Loading weekly progress...</p>
        ) : state.isError ? (
          <p className="text-xs text-red-300">Weekly progress could not be loaded.</p>
        ) : items.length > 0 ? (
          items.map((item) => (
            <div key={item.label}>
              <div className="flex justify-between text-xs mb-1">
                <span className="text-slate-400">{item.label}</span>
                <span className={`font-semibold ${item.color}`}>{item.status}</span>
              </div>
              <div className="h-2 bg-slate-700/50 rounded-full overflow-hidden">
                <div className={`h-full ${item.bar} rounded-full ${item.width} transition-all`} />
              </div>
            </div>
          ))
        ) : (
          <p className="text-xs text-slate-400">No weekly progress items are published yet.</p>
        )}
      </div>
    </section>
  );
}
