'use client';
import { useRef } from 'react';

type Komentar = {
    id: string;
    nama: string;
    isi: string;
    createdAt: Date;
};

export default function KomentarSection({ komentarAwal }: { komentarAwal: Komentar[] }) {
    const scrollRef = useRef<HTMLDivElement>(null);

    const scroll = (direction: 'left' | 'right') => {
        if (scrollRef.current) {
            const { current } = scrollRef;
            const scrollAmount = direction === 'left' ? -400 : 400;
            current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
        }
    };

    if (!komentarAwal || komentarAwal.length === 0) return null;

    return (
        <section className="w-full py-16 md:py-24 bg-[#f8fafc] relative overflow-hidden">
            {/* Background Style: Light Glassmorph */}
            <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
                <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'radial-gradient(#0B1F3A 2px, transparent 2px)', backgroundSize: '32px 32px'}}></div>
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.4)_0%,rgba(248,250,252,0.9)_100%)]"></div>
            </div>
            
            <div className="container mx-auto px-4 mb-10 relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
                <h2 className="text-3xl md:text-4xl font-extrabold text-[#0B1F3A] tracking-tighter">
                    Komentar
                </h2>
                
                {/* Scroll Buttons */}
                <div className="flex items-center gap-2">
                    <button onClick={() => scroll('left')} className="px-4 py-2 rounded-full border border-gray-200 bg-white shadow-sm flex items-center justify-center text-[#0B1F3A] hover:bg-gray-50 transition-colors text-sm font-semibold">
                        Terbaru
                    </button>
                    <button onClick={() => scroll('right')} className="px-4 py-2 rounded-full border border-gray-200 bg-white shadow-sm flex items-center justify-center text-[#0B1F3A] hover:bg-gray-50 transition-colors text-sm font-semibold">
                        Terlama
                    </button>
                </div>
            </div>

            <div className="relative z-10 w-full px-4 md:px-8 max-w-full">
                <div 
                    ref={scrollRef}
                    className="flex gap-4 md:gap-6 overflow-x-auto snap-x snap-mandatory pb-8 pt-2 hide-scrollbar w-full"
                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                >
                    {komentarAwal.map((k) => (
                        <div key={k.id} className="relative shrink-0 w-[280px] md:w-[350px] bg-white rounded-2xl border border-gray-100 p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col snap-start">
                            <div className="flex items-center justify-between mb-3">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-full bg-[#2c1469]/10 flex items-center justify-center text-[#2c1469] font-bold text-lg shrink-0">
                                        {k.nama[0]?.toUpperCase()}
                                    </div>
                                    <span className="font-bold text-[#0B1F3A] text-sm md:text-base truncate max-w-[150px]">{k.nama}</span>
                                </div>
                                <span className="text-xs text-gray-400 shrink-0">
                                    {new Date(k.createdAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' })}
                                </span>
                            </div>
                            <p className="text-gray-600 text-sm md:text-sm leading-relaxed">{k.isi}</p>
                        </div>
                    ))}
                </div>
            </div>
            
            <style dangerouslySetInnerHTML={{__html: `
                .hide-scrollbar::-webkit-scrollbar {
                    display: none;
                }
            `}} />
        </section>
    );
}