'use client';

import Link from 'next/link';
import { ShieldCheck, Leaf, Award, type LucideIcon } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { isRtl } from '@/i18n';
import { cn } from '@/lib/utils';

interface BadgeItem {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
}

function BadgeCard({ badge }: { badge: BadgeItem }) {
  const Icon = badge.icon;

  return (
    <Link
      href={badge.href}
      className="group flex w-[min(300px,80vw)] shrink-0 items-center gap-4 rounded-xl border border-white/10 bg-brand-900/55 px-5 py-4 shadow-premium backdrop-blur-sm transition-colors hover:border-gold-500/35 hover:bg-brand-800/65"
    >
      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-brand-800/80 ring-1 ring-gold-500/25 transition-colors group-hover:bg-gold-500/15">
        <Icon className="h-6 w-6 text-gold-400" />
      </div>
      <div className="min-w-0 text-start">
        <h3 className="font-display text-sm font-bold text-white sm:text-base">
          {badge.title}
        </h3>
        <p className="line-clamp-2 text-xs leading-relaxed text-brand-200">
          {badge.description}
        </p>
      </div>
    </Link>
  );
}

export default function TrustBadges() {
  const { t, locale } = useTranslation();
  const rtl = isRtl(locale);

  const badges: BadgeItem[] = [
    {
      icon: ShieldCheck,
      title: t('trust.halal'),
      description: t('trust.halalDesc'),
      href: '/about#halal',
    },
    {
      icon: Leaf,
      title: t('trust.fresh'),
      description: t('trust.freshDesc'),
      href: '/about#delivery',
    },
    {
      icon: Award,
      title: t('trust.premium'),
      description: t('trust.premiumDesc'),
      href: '/about',
    },
  ];

  const loop = [...badges, ...badges];

  return (
    <div className="relative z-10 w-full">
      <div className="group/trust relative overflow-hidden rounded-2xl border border-white/5 bg-brand-950/20 py-3 backdrop-blur-[2px]">
        <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-10 bg-gradient-to-r from-brand-900/90 to-transparent sm:w-16" />
        <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-10 bg-gradient-to-l from-brand-900/90 to-transparent sm:w-16" />

        <div
          className={cn(
            'flex w-max gap-4 motion-reduce:animate-none group-hover/trust:[animation-play-state:paused]',
            rtl ? 'animate-trust-marquee-rtl' : 'animate-trust-marquee'
          )}
        >
          {loop.map((badge, i) => (
            <BadgeCard key={`${badge.title}-${i}`} badge={badge} />
          ))}
        </div>
      </div>
    </div>
  );
}