/* global React */
const { useEffect, useRef } = React;

const TP_BUSINESSUNIT_ID = '6a16246c050157814bccd10c';
const TP_REVIEW_URL = 'https://www.trustpilot.com/review/pimpripromotion.com';

// Carousel — auto-rotating reviews carousel, great for showcasing testimonials
function TrustpilotCarousel({ theme = 'dark' }) {
  const ref = useRef(null);
  const { lang } = window.useLang();
  const locale = lang === 'th' ? 'th-TH' : 'en-US';

  useEffect(() => {
    if (ref.current && window.Trustpilot) {
      window.Trustpilot.loadFromElement(ref.current, true);
    }
  }, [locale, theme]);

  return (
    <div
      ref={ref}
      className="trustpilot-widget"
      data-locale={locale}
      data-template-id="53aa8807dec7e10d38f59f32"
      data-businessunit-id={TP_BUSINESSUNIT_ID}
      data-style-height="140px"
      data-style-width="100%"
      data-theme={theme}
      data-stars="4,5"
      data-review-languages={lang === 'th' ? 'th,en' : 'en'}
    >
      <a href={TP_REVIEW_URL} target="_blank" rel="noopener noreferrer">Trustpilot</a>
    </div>
  );
}

// Mini display widget — shows star rating + review count (24px height, perfect for nav/footer)
function TrustpilotMini({ theme = 'dark' }) {
  const ref = useRef(null);
  const { lang } = window.useLang();
  const locale = lang === 'th' ? 'th-TH' : 'en-US';

  useEffect(() => {
    if (ref.current && window.Trustpilot) {
      window.Trustpilot.loadFromElement(ref.current, true);
    }
  }, [locale, theme]);

  return (
    <div
      ref={ref}
      className="trustpilot-widget"
      data-locale={locale}
      data-template-id="5419b6a8b0d04a076446a9ad"
      data-businessunit-id={TP_BUSINESSUNIT_ID}
      data-style-height="24px"
      data-style-width="100%"
      data-theme={theme}
    >
      <a href={TP_REVIEW_URL} target="_blank" rel="noopener noreferrer">Trustpilot</a>
    </div>
  );
}

Object.assign(window, { TrustpilotCarousel, TrustpilotMini });