'use client';

import React from 'react';
import { TrustSettings } from '@/lib/settings';

const TRUST_ICONS = [
  // Lab / purity
  <svg key="lab" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 3h6M10 3v6.5L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9.5V3" />
    <path d="M7.5 15h9" />
  </svg>,
  // Cash on delivery
  <svg key="cod" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="6.5" width="18" height="11" rx="2.5" />
    <circle cx="12" cy="12" r="2.5" />
  </svg>,
  // Fast delivery
  <svg key="del" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 7h11v9H3zM14 10h4l3 3v3h-7" />
    <circle cx="7" cy="17.5" r="1.8" />
    <circle cx="17" cy="17.5" r="1.8" />
  </svg>,
  // Easy return
  <svg key="ret" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 7 5 11l4 4" />
    <path d="M5 11h9a5 5 0 0 1 0 10h-3" />
  </svg>,
];

const DEFAULT_TRUST_ITEMS = [
  { title: 'ভেজালমুক্ত', sub: 'প্রতিটি ব্যাচ মান যাচাই করা' },
  { title: 'ক্যাশ অন ডেলিভারি', sub: 'হাতে পেয়ে টাকা দিন' },
  { title: 'দ্রুত ডেলিভারি', sub: 'ঢাকায় ২৪–৪৮ ঘণ্টা' },
  { title: 'সহজ রিটার্ন', sub: 'সমস্যা হলে ৩ দিনের মধ্যে' },
];

interface TrustBarProps {
  settings?: TrustSettings;
}

export default function TrustBar({ settings }: TrustBarProps) {
  if (settings && settings.enabled === false) return null;
  const items = settings?.items && settings.items.length > 0 ? settings.items : DEFAULT_TRUST_ITEMS;

  return (
    <section className="sec wrap" style={{ paddingTop: 0 }} aria-label="আমাদের প্রতিশ্রুতি">
      <div className="tbar">
        {items.map((item, idx) => (
          <div className="tb" key={idx}>
            <span className="tbi">{TRUST_ICONS[idx % TRUST_ICONS.length]}</span>
            <span>
              <b>{item.title}</b>
              <small>{item.sub}</small>
            </span>
          </div>
        ))}
      </div>
    </section>
  );
}