import React from 'react'

export default function LiveToggle({ current, onSwitch, recordedMap }) {
  const isLive = current.mode === 'live'
  const hasRec = current.cam_id && recordedMap[current.cam_id]
  return (
    <div className="flex items-center gap-2">
      <button
        disabled={!current.cam_id || !hasRec}
        onClick={() => onSwitch(current.cam_id, 'recorded')}
        className={`px-3 py-1.5 rounded text-[12px] uppercase tracking-wider border
          ${!isLive ? 'bg-line text-text border-line' : 'bg-bg text-muted border-line hover:text-text'}
          disabled:opacity-30 disabled:cursor-not-allowed`}
      >Recorded</button>
      <button
        disabled={!current.cam_id}
        onClick={() => onSwitch(current.cam_id, 'live')}
        className={`px-3 py-1.5 rounded text-[12px] uppercase tracking-wider border
          flex items-center gap-1.5
          ${isLive ? 'bg-warn/20 text-warn border-warn' : 'bg-bg text-muted border-line hover:text-text'}
          disabled:opacity-30 disabled:cursor-not-allowed`}
      >
        {isLive && <span className="mark-dot bg-warn animate-pulse" />}
        Live
      </button>
    </div>
  )
}