import { ArrowRight, User } from 'lucide-react';
import type { WalkthroughSummaryWorkflow } from '@/components/walkthrough-summary/types';

interface WalkthroughTeacherFrequencyProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughTeacherFrequency({ summary }: WalkthroughTeacherFrequencyProps) {
  if (summary.selectedTeacher !== 'all' || summary.teachers.length === 0) {
    return null;
  }

  return (
    <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
      <h3 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
        <User size={16} className="text-cyan-400" /> Walk-Through Frequency by Teacher
      </h3>
      <div className="space-y-2">
        {summary.teacherFrequencies.map((frequency) => (
          <button
            key={frequency.teacher}
            type="button"
            onClick={() => summary.setSelectedTeacher(frequency.teacher)}
            className="w-full flex items-center gap-3 hover:bg-slate-700/30 rounded-lg p-2 transition-colors group"
          >
            <span className="text-xs text-slate-400 w-32 text-right truncate">{frequency.teacher}</span>
            <div className="flex-1 h-5 bg-slate-900/50 rounded-full overflow-hidden">
              <div className="h-full bg-cyan-500/60 rounded-full transition-all" style={{ width: `${frequency.pct}%` }} />
            </div>
            <span className="text-xs font-semibold text-cyan-400 w-8">{frequency.count}</span>
            <ArrowRight size={12} className="text-slate-600 group-hover:text-slate-400 transition-colors" />
          </button>
        ))}
      </div>
    </div>
  );
}
