'use client'

import { WorkshopSession, statusColors, statusLabels, typeLabels } from './types'

export function SessionCard({ session, onSelect, onDelete }: {
  session: WorkshopSession
  onSelect: (s: WorkshopSession) => void
  onDelete: (id: string) => void
}) {
  const progress = session.total_steps > 0
    ? Math.round((session.current_step / session.total_steps) * 100)
    : 0

  return (
    <div className="bg-white rounded-xl border-2 border-gray-200 p-6 hover:border-purple-300 transition-colors cursor-pointer"
      onClick={() => onSelect(session)}>
      <div className="flex items-start justify-between mb-3">
        <div>
          <h4 className="font-semibold text-gray-900">{session.title}</h4>
          <span className="text-xs text-gray-500">{typeLabels[session.session_type] || session.session_type}</span>
        </div>
        <span className={`px-2 py-1 text-xs rounded-full ${statusColors[session.status] || 'bg-gray-100 text-gray-700'}`}>
          {statusLabels[session.status] || session.status}
        </span>
      </div>
      {session.description && (
        <p className="text-sm text-gray-600 mb-3 line-clamp-2">{session.description}</p>
      )}
      <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
        <span>Code: <code className="bg-gray-100 px-1 rounded">{session.join_code}</code></span>
        <span>Schritt {session.current_step}/{session.total_steps}</span>
      </div>
      <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden mb-3">
        <div className="h-full bg-purple-500 rounded-full transition-all" style={{ width: `${progress}%` }} />
      </div>
      <div className="flex justify-between items-center">
        <span className="text-xs text-gray-400">
          {new Date(session.created_at).toLocaleDateString('de-DE')}
        </span>
        <button
          onClick={(e) => { e.stopPropagation(); onDelete(session.id) }}
          className="text-xs text-red-500 hover:text-red-700 hover:bg-red-50 px-2 py-1 rounded"
        >
          Loeschen
        </button>
      </div>
    </div>
  )
}
