'use client'

import { AuditSession, SESSION_STATUS } from './types'

export default function SessionCard({ session, onClick }: { session: AuditSession; onClick: () => void }) {
  const completionPercent = session.total_items > 0
    ? Math.round((session.completed_items / session.total_items) * 100)
    : 0

  return (
    <button
      onClick={onClick}
      className="bg-white rounded-lg border border-slate-200 p-4 text-left hover:shadow-md hover:border-primary-300 transition-all"
    >
      <div className="flex items-start justify-between mb-3">
        <h3 className="font-semibold text-slate-900">{session.name}</h3>
        <span className={`px-2 py-0.5 text-xs font-medium rounded ${SESSION_STATUS[session.status].color}`}>
          {SESSION_STATUS[session.status].label}
        </span>
      </div>

      {session.description && (
        <p className="text-sm text-slate-500 mb-3 line-clamp-2">{session.description}</p>
      )}

      <div className="mb-3">
        <div className="flex justify-between text-xs text-slate-500 mb-1">
          <span>{session.completed_items} / {session.total_items} Punkte</span>
          <span>{completionPercent}%</span>
        </div>
        <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
          <div
            className="h-full bg-primary-500 transition-all"
            style={{ width: `${completionPercent}%` }}
          />
        </div>
      </div>

      <div className="flex items-center justify-between text-xs text-slate-500">
        <span>Auditor: {session.auditor_name}</span>
        <span>{new Date(session.created_at).toLocaleDateString('de-DE')}</span>
      </div>
    </button>
  )
}
