import type { Session } from '../api/types';
import { formatDate, formatDuration, formatTime } from '../lib/format';

export function SessionList({ sessions }: { sessions: Session[] }) {
  if (sessions.length === 0) {
    return <div className="empty-line">· žádné směny v tomto období</div>;
  }

  const sorted = [...sessions].sort((a, b) => b.clockIn.localeCompare(a.clockIn));

  return (
    <div className="list">
      {sorted.map((s) => (
        <div className="row" key={s.clockIn}>
          <div className="row-main">
            <div className="row-title">
              {formatDate(s.clockIn)} &middot; {formatTime(s.clockIn)}
              {' – '}
              {s.clockOut ? formatTime(s.clockOut) : 'probíhá'}
            </div>
            <div className="row-meta">
              {s.breaks.length > 0
                ? `${s.breaks.length}× pauza · ${formatDuration(s.breakMs)}`
                : 'bez pauzy'}
            </div>
          </div>
          <div className="row-action">
            {s.open ? (
              <span className="badge badge-solid">{formatDuration(s.workedMs)}</span>
            ) : (
              <span className="badge">{formatDuration(s.workedMs)}</span>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}
