Timeline Labels

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { useTimelineStore } from "@/hooks/limeplay/use-timeline"
import {
  Duration,
  Elapsed,
  Remaining,
} from "@/components/limeplay/timeline-labels"

export function TimeDisplay() {
  const [showRemaining, setShowRemaining] = useState(false)
  const isLive = useTimelineStore((s) => s.isLive)

  return (
    <div className="flex items-center gap-3 select-none">
      {!isLive && <Elapsed className="text-xs font-medium" />}
      {!isLive && (
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setShowRemaining(!showRemaining)}
        >
          {showRemaining ? (
            <Remaining className="text-xs font-medium" />
          ) : (
            <Duration className="text-xs font-medium" />
          )}
        </Button>
      )}
    </div>
  )
}