"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-6 border border-gray-200">
        <div className="flex items-center gap-6">
          {/* PLAY BUTTON */}
          <button
            onClick={() => setPlaying(!playing)}
            className="h-16 w-16 rounded-full bg-yellow-400 flex items-center justify-center shadow-md hover:scale-105 transition"
          >
            {playing ? (
              <Pause size={28} className="text-black" />
            ) : (
              <Play size={28} className="text-black ml-1" />
            )}
          </button>

          {/* WAVEFORM + DURATION */}
          <div className="flex-1">
            {/* FAKE WAVEFORM */}
            <div className="h-16 flex items-center gap-[3px]">
              {Array.from({ length: 70 }).map((_, i) => (
                <div
                  key={i}
                  className={`w-[3px] rounded-full ${
                    i < 35 ? "bg-black" : "bg-gray-400"
                  }`}
                  style={{
                    height: `${Math.random() * 40 + 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} />

              <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-4 text-sm text-gray-500">
        <span className="bg-red-600 text-white 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-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-[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>
  );
}