'use client'

import type { Klausur } from '../types'
import { GlassCard } from './GlassCard'

interface KlausurCardProps {
  klausur: Klausur
  onClick: () => void
  delay?: number
  isDark?: boolean
}

export function KlausurCard({ klausur, onClick, delay = 0, isDark = true }: KlausurCardProps) {
  const progress = klausur.student_count
    ? Math.round(((klausur.completed_count || 0) / klausur.student_count) * 100)
    : 0

  const statusColor = klausur.status === 'completed'
    ? '#22c55e'
    : klausur.status === 'in_progress'
      ? '#f97316'
      : '#6b7280'

  return (
    <GlassCard onClick={onClick} delay={delay} className="min-h-[180px]" isDark={isDark}>
      <div className="flex flex-col h-full">
        <div className="flex items-start justify-between mb-3">
          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
          <span
            className="px-2 py-1 rounded-full text-xs font-medium"
            style={{ backgroundColor: `${statusColor}20`, color: statusColor }}
          >
            {klausur.status === 'completed' ? 'Fertig' : klausur.status === 'in_progress' ? 'In Arbeit' : 'Entwurf'}
          </span>
        </div>

        <p className={`text-sm mb-4 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
          {klausur.subject} {klausur.semester} {klausur.year}
        </p>

        <div className="mt-auto">
          <div className="flex justify-between text-sm mb-2">
            <span className={isDark ? 'text-white/50' : 'text-slate-500'}>{klausur.student_count || 0} Arbeiten</span>
            <span className={isDark ? 'text-white' : 'text-slate-900'}>{progress}%</span>
          </div>

          <div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
            <div
              className="h-full rounded-full transition-all duration-500"
              style={{
                width: `${progress}%`,
                background: `linear-gradient(90deg, ${statusColor}, ${statusColor}80)`,
              }}
            />
          </div>
        </div>
      </div>
    </GlassCard>
  )
}