'use client';

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

const DEFAULT_REVIEWS = [
  { n: 'ফারিহা আক্তার', r: 'শিক্ষার্থী, ঢাকা', t: 'সরিষা ফুলের মধুটা শীতে জমে গেল — পরে জানলাম এটাই খাঁটি মধুর লক্ষণ। স্বাদ একদম গ্রামের মতো।' },
  { n: 'Tanvir Ahmed', r: 'সফটওয়্যার ইঞ্জিনিয়ার', t: 'Triphola আর Isobgul নিয়মিত নিচ্ছি। প্যাকেজিং খুব পরিষ্কার, ডেলিভারি ২ দিনে পেয়েছি।' },
  { n: 'সুলতানা ইয়াসমিন', r: 'গৃহিণী, সিলেট', t: 'আলু বোখারা চাটনি বিরিয়ানির সাথে সবাই পছন্দ করেছে। অর্ডারের পর ফোন করে কনফার্ম করেছে, ভালো লেগেছে।' },
];

interface ReviewsSectionProps {
  settings?: SimpleSectionSettings;
}

export default function ReviewsSection({ settings }: ReviewsSectionProps) {
  const title = settings?.title || 'কাস্টমাররা যা বলছেন';
  const subtitle = settings?.subtitle || '';

  return (
    <section className="sec wrap" style={{ paddingTop: 0 }} aria-label="কাস্টমার রিভিউ">
      <div className="sec-h">
        <div>
          <h2>{title}</h2>
          {subtitle ? <p>{subtitle}</p> : null}
        </div>
      </div>
      <div className="revs">
        {DEFAULT_REVIEWS.map((r, i) => (
          <figure className="rev" key={i}>
            <div className="stars" aria-label="৫ এর মধ্যে ৫">★★★★★</div>
            <p>{r.t}</p>
            <figcaption className="who">
              <i>{r.n.charAt(0)}</i>
              <span>
                <b>{r.n}</b>
                <small>{r.r}</small>
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}