qudoco-fe/components/details/audio-selections.tsx

"use client";

import { useState } from "react";
import { Play, Pause, Volume2 } from "lucide-react";

export default function AudioPlayerSection() {
  const [playing, setPlaying] = useState(false);
  const [progress, setProgress] = useState(30);

  return (
    <div className="space-y-6">
      {/* ===== AUDIO PLAYER CARD ===== */}
      <div className="bg-gray-50 rounded-2xl p-4 md:p-6 border border-gray-200">
        <div className="flex flex-col md:flex-row md:items-center gap-6">
          {/* PLAY BUTTON */}
          <div className="flex justify-center md:justify-start">
            <button
              onClick={() => setPlaying(!playing)}
              className="h-14 w-14 md:h-16 md:w-16 rounded-full bg-yellow-400 flex items-center justify-center shadow-md hover:scale-105 transition"
            >
              {playing ? (
                <Pause size={24} className="text-black" />
              ) : (
                <Play size={24} className="text-black ml-1" />
              )}
            </button>
          </div>

          {/* WAVEFORM + DURATION */}
          <div className="flex-1">
            {/* FAKE WAVEFORM */}
            <div className="h-14 md:h-16 flex items-center gap-[2px] overflow-hidden">
              {Array.from({ length: 60 }).map((_, i) => (
                <div
                  key={i}
                  className={`w-[2px] md:w-[3px] rounded-full ${
                    i < 30 ? "bg-black" : "bg-gray-400"
                  }`}
                  style={{
                    height: `${Math.random() * 35 + 10}px`,
                  }}
                />
              ))}
            </div>

            {/* TIME */}
            <div className="flex justify-between text-xs text-gray-500 mt-2">
              <span>2:14</span>
              <span>5:00</span>
            </div>

            {/* PROGRESS */}
            <div className="flex items-center gap-3 mt-3">
              <Volume2 size={16} className="shrink-0" />
              <input
                type="range"
                min={0}
                max={100}
                value={progress}
                onChange={(e) => setProgress(Number(e.target.value))}
                className="w-full accent-blue-600"
              />
            </div>
          </div>
        </div>
      </div>

      {/* ===== META INFO ===== */}
      <div className="flex flex-wrap items-center gap-3 text-xs md:text-sm text-gray-500">
        <span className="bg-red-600 text-white text-[10px] md:text-xs px-2 py-1 rounded">
          POLRI
        </span>

        <span>02 Februari 2024</span>
        <span>61</span>
        <span>Kreator: BPKH Jurnalis</span>
      </div>

      {/* ===== TITLE ===== */}
      <h1 className="text-lg md:text-2xl font-semibold leading-snug">
        Bharatu Mardi Hadji Gugur Saat Bertugas, Diganjar Kenaikan Pangkat Luar
        Biasa
      </h1>

      {/* ===== ARTICLE ===== */}
      <div className="space-y-4 text-gray-700 leading-relaxed text-sm md:text-[15px]">
        <p>
          Jakarta - Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo memberikan
          kenaikan pangkat luar biasa anumerta kepada almarhum Bharatu Mardi
          Hadji...
        </p>

        <p>
          Dengan penghargaan ini, almarhum resmi dinaikkan pangkatnya satu
          tingkat lebih tinggi menjadi Bharaka Anumerta...
        </p>

        <p>
          Karo Penmas Divisi Humas Polri, Brigjen Pol. Trunoyudo Wisnu Andiko,
          menyatakan bahwa kenaikan pangkat anumerta ini merupakan bentuk
          penghormatan...
        </p>
      </div>
    </div>
  );
}