import type { EventType, LiveStatus } from '../api/types';

interface Props {
  status: LiveStatus;
  busy: boolean;
  onAction: (type: EventType) => void;
}

export function ClockControls({ status, busy, onAction }: Props) {
  if (status === 'clocked_out') {
    return (
      <button className="btn btn-block" disabled={busy} onClick={() => onAction('clock_in')}>
        Příchod
      </button>
    );
  }

  if (status === 'working') {
    return (
      <div style={{ display: 'flex', gap: '0.5rem' }}>
        <button
          className="btn btn-block"
          disabled={busy}
          onClick={() => onAction('break_start')}
        >
          Start pauzy
        </button>
        <button className="btn btn-block" disabled={busy} onClick={() => onAction('clock_out')}>
          Odchod
        </button>
      </div>
    );
  }

  return (
    <button className="btn btn-block" disabled={busy} onClick={() => onAction('break_end')}>
      Konec pauzy
    </button>
  );
}
