'use client';

import { AlertTriangle, RotateCcw } from 'lucide-react';
import { usePlayerControls, usePlayerState } from '../../context/selectors';

const REASONS: Record<string, string> = {
  network: 'Network error while loading audio.',
  decode: "We can't decode this audio.",
  unsupported: 'This audio format is not supported.',
  unknown: 'Audio playback failed.',
};

export function ErrorState() {
  const state = usePlayerState();
  const { play } = usePlayerControls();
  if (state.kind !== 'error') return null;
  const message = REASONS[state.reason] ?? REASONS.unknown;
  return (
    <div
      role="alert"
      className="flex items-center gap-3 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive"
    >
      <AlertTriangle size={14} strokeWidth={1.75} />
      <span className="flex-1">{message}</span>
      <button
        type="button"
        onClick={() => void play()}
        className="audioplayer-press inline-flex items-center gap-1 rounded-md px-2 py-1 text-destructive hover:bg-destructive/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40"
      >
        <RotateCcw size={12} strokeWidth={2} />
        Retry
      </button>
    </div>
  );
}