import type { Dictionary } from "@/i18n";

export function MediaPlayer({
  videoUrl,
  audioUrl,
  poster,
  dict,
}: {
  videoUrl?: string;
  audioUrl?: string;
  poster?: string;
  dict: Dictionary;
}) {
  return (
    <div className="space-y-6">
      {videoUrl && (
        <figure className="overflow-hidden rounded-3xl border border-line bg-ink">
          <video
            controls
            preload="metadata"
            playsInline
            poster={poster}
            className="aspect-video w-full bg-black"
          >
            <source src={videoUrl} />
          </video>
        </figure>
      )}

      {audioUrl && (
        <div className="rounded-3xl border border-line bg-surface p-5">
          <p className="mb-3 text-sm font-semibold uppercase tracking-[0.14em] text-brand-bright">
            {dict.cta.listen}
          </p>
          <audio controls preload="metadata" className="w-full">
            <source src={audioUrl} />
          </audio>
        </div>
      )}

      {(videoUrl || audioUrl) && (
        <div className="flex flex-wrap gap-3">
          {videoUrl && (
            <a
              href={videoUrl}
              download
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-ink/15 px-5 py-2.5 text-sm font-semibold transition hover:border-ink/40"
            >
              ↓ {dict.cta.downloadVideo}
            </a>
          )}
          {audioUrl && (
            <a
              href={audioUrl}
              download
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-ink/15 px-5 py-2.5 text-sm font-semibold transition hover:border-ink/40"
            >
              ↓ {dict.cta.downloadAudio}
            </a>
          )}
        </div>
      )}
    </div>
  );
}