"use client";

import { Download } from "lucide-react";
import { Button } from "@/components/ui/button";

function formatDuration(sec?: number | null): string {
  if (!sec) return "";
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
}

export function AudioPlayer({
  storageKey,
  durationSec,
}: {
  storageKey: string;
  durationSec?: number | null;
}) {
  const src = `/api/assets/${storageKey}`;
  return (
    <div className="space-y-3">
      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
      <audio controls src={src} className="w-full" preload="metadata" />
      <div className="flex items-center justify-between">
        {durationSec ? (
          <span className="text-xs text-muted-foreground">Length {formatDuration(durationSec)}</span>
        ) : (
          <span />
        )}
        <Button asChild variant="outline" size="sm">
          <a href={`${src}?download=1`} download>
            <Download className="h-4 w-4" /> Download MP3
          </a>
        </Button>
      </div>
    </div>
  );
}