sexy/components/control/RecordControls.tsx

"use client";

import { Button } from "@/components/ui/button";
import { Circle, Square } from "lucide-react";

interface RecordControlsProps {
  active: boolean;
  elapsedLabel: string;
  disabled: boolean;
  busy: boolean;
  onStart: () => void;
  onEnd: () => void;
}

export function RecordControls({ active, elapsedLabel, disabled, busy, onStart, onEnd }: RecordControlsProps) {
  if (active) {
    return (
      <div className="flex items-center gap-3">
        <span className="flex items-center gap-2 text-sm font-medium">
          <Circle className="bp-pulse size-2.5 fill-destructive text-destructive" />
          Session live · {elapsedLabel}
        </span>
        <Button variant="outline" onClick={onEnd} disabled={busy}>
          <Square className="size-3.5" /> End session
        </Button>
      </div>
    );
  }

  return (
    <Button onClick={onStart} disabled={disabled || busy}>
      <Circle className="size-3.5" /> Start session
    </Button>
  );
}