'use client';

import { usePathname } from 'next/navigation';
import { Megaphone } from 'lucide-react';

export default function Ticker() {
  const pathname = usePathname();
  const locale = pathname.startsWith('/en') ? 'en' : 'vi';

  const messages = locale === 'vi' 
    ? [
        "THÔNG BÁO QUAN TRỌNG: Tất cả sản phẩm đăng tải trên hệ thống đều phải cập nhật đầy đủ thông tin mô tả.",
        "Thông báo người mua hàng: Để theo dõi và xử lý các vấn đề về đơn hàng, người mua vui lòng truy cập vào mục đơn hàng.",
        "Hoạt động mua bán mới nhất: Tài khoản Cursor Pro vừa được giao dịch thành công!"
      ]
    : [
        "IMPORTANT NOTICE: All products posted on the system must be updated with full description information.",
        "Notice to buyers: To track and resolve order issues, please go to the orders section.",
        "Latest trading activity: Cursor Pro account has just been successfully traded!"
      ];

  return (
    <div className="bg-black/90 border-b border-white/5 py-1.5 overflow-hidden flex items-center px-4">
      <div className="flex items-center gap-2 pr-4 shrink-0 border-r border-white/10 z-10 bg-black/90 relative">
        <span className="bg-red-500/20 text-red-500 text-[10px] font-bold px-2 py-0.5 rounded-sm uppercase flex items-center gap-1">
          <Megaphone className="w-3 h-3" />
          Tin Mới
        </span>
      </div>
      <div className="flex-1 overflow-hidden relative">
        <div className="whitespace-nowrap flex gap-12 animate-marquee items-center text-xs text-gray-300">
          {messages.map((msg, idx) => (
            <span key={idx} className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-primary/50" />
              {msg}
            </span>
          ))}
          {/* Duplicate for seamless loop */}
          {messages.map((msg, idx) => (
            <span key={`dup-${idx}`} className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-primary/50" />
              {msg}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}