import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'

export default function TrustBar() {
  const { t } = useTranslation()
  const items = t('trust.items', { returnObjects: true })

  return (
    <div className="w-full bg-nordic-navy border-y border-nordic-stone/20 overflow-hidden py-4">
      <div className="flex animate-[float_20s_linear_infinite] whitespace-nowrap">
        {/* Duplicate items for seamless loop */}
        {[...items, ...items, ...items].map((item, index) => (
          <div key={index} className="flex items-center mx-8">
            <span className="font-mono text-sm text-nordic-stone uppercase tracking-wider">
              {item}
            </span>
            <span className="mx-8 w-1 h-1 rounded-full bg-nordic-cyan/50" />
          </div>
        ))}
      </div>
    </div>
  )
}