'use client';
import { useEffect, useState } from 'react';
import Avatar from './Avatar';
import type { Komen } from '@/data/video';

/**
 * Papar komen gaya sosial mengikut masa main video.
 * Nota: komen ini adalah paparan reka bentuk, bukan ulasan pelanggan sebenar.
 * Testimoni sebenar ada di bahagian "Apa kata mereka" pada halaman.
 */
export default function AliranKomen({ komen, masa }: { komen: Komen[]; masa: number }) {
  const [nampak, setNampak] = useState<Komen[]>([]);

  useEffect(() => {
    const layak = komen.filter((k) => k.pada <= masa).slice(-3);
    setNampak(layak);
  }, [masa, komen]);

  if (!nampak.length) return null;

  return (
    <ul className="pointer-events-none space-y-1.5">
      {nampak.map((k) => (
        <li
          key={k.nama + k.pada}
          className="animate-naik flex w-fit max-w-[16rem] items-center gap-2 rounded-full bg-black/45 px-2.5 py-1.5 backdrop-blur-sm"
        >
          <Avatar nama={k.nama} saiz={22} />
          <span className="text-[13px] leading-tight text-white/95 drop-shadow">
            <b className="font-semibold text-white/70">{k.nama}</b>{' '}{k.teks}
          </span>
        </li>
      ))}
    </ul>
  );
}