/**
 * @component TrustBadges
 * @purpose Trust badges bar matching TechShop reference UI with dynamic API-driven data.
 * @dependencies storefrontService, lucide-react
 */
'use client';

import { useState, useEffect } from 'react';
import { Truck, RotateCcw, Headphones, ShieldCheck, LucideIcon } from 'lucide-react';
import { storefrontService, TrustBadge } from '@/services/api/storefrontService';

export function TrustBadges() {
  const [badges, setBadges] = useState<TrustBadge[]>([]);

  useEffect(() => {
    storefrontService.getTrustBadges().then(setBadges);
  }, []);

  const getIcon = (iconName: string): LucideIcon => {
    switch (iconName) {
      case 'truck': return Truck;
      case 'refresh': return RotateCcw;
      case 'headset': return Headphones;
      case 'shield': default: return ShieldCheck;
    }
  };

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

  return (
    <div className="w-full max-w-7xl mx-auto px-4 my-10">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {badges.map((badge) => {
          const IconComponent = getIcon(badge.icon);
          return (
            <div
              key={badge.id}
              className="bg-[#eef4fc] rounded-2xl p-5 flex items-center gap-4 border border-blue-100 shadow-2xs hover:shadow-xs transition-shadow"
            >
              <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shrink-0 shadow-2xs">
                <IconComponent className="w-6 h-6 text-[#1877f2]" />
              </div>
              <div>
                <h4 className="font-black text-gray-900 text-sm">{badge.title}</h4>
                <p className="text-xs text-gray-500 font-medium mt-0.5">{badge.subtitle}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}