import type { ReactNode } from "react";

import type { AudioClip } from "../api/types";

export function ClipSummaryRow({
  clip,
  isPlaying,
  onTogglePlayback,
  titleExtras,
  subtitle,
  actions,
  isPlaybackAvailable = true,
}: {
  clip: AudioClip;
  isPlaying: boolean;
  onTogglePlayback: () => void;
  titleExtras?: ReactNode;
  subtitle?: ReactNode;
  actions?: ReactNode;
  isPlaybackAvailable?: boolean;
}) {
  return (
    <div className="clip-summary">
      <div className="clip-summary-header">
        <button
          type="button"
          className={`btn btn-sm icon-button icon-button-circle${isPlaying ? " btn-success" : " btn-outline-secondary"}`}
          onClick={onTogglePlayback}
          disabled={!isPlaybackAvailable}
          aria-label={isPlaying ? "Stop playback" : "Play clip"}
          title={isPlaying ? "Stop playback" : "Play clip"}
        >
          <i className={`bi ${isPlaying ? "bi-stop-fill" : "bi-play-fill"}`} aria-hidden="true" />
        </button>
        <div className="clip-summary-title-row">
          <strong>{clip.label}</strong>
          {titleExtras}
        </div>
        {actions ? <div className="clip-summary-actions">{actions}</div> : null}
      </div>
      {subtitle ? <div className="clip-summary-subtitle">{subtitle}</div> : null}
    </div>
  );
}
