import Link from 'next/link';
import { Star } from 'lucide-react';
import Reveal from '../Reveal.jsx';
import SectionHeading from '../SectionHeading.jsx';
import ReviewForm from './ReviewForm.jsx';

function cx(...args) {
  return args.filter(Boolean).join(' ');
}

export default function Reviews({ reviews, limit, moreHref, showForm = true, headingLevel = 'h2' }) {
  const list = limit ? reviews.slice(0, limit) : reviews;

  // Пустая витрина отзывов на тизере (главная) выглядит слабо - лучше не показывать
  // секцию вовсе, чем пустой список без формы для его заполнения.
  if (list.length === 0 && !showForm) return null;

  if (list.length === 0) {
    return (
      <section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
        <div className="max-w-2xl mx-auto px-5 sm:px-8">
          <SectionHeading
            eyebrow="reviews --approved"
            title="Отзывы клиентов"
            desc="Отзывов пока нет - будьте первым, кто расскажет о работе с нами. Публикуется после проверки менеджером."
            level={headingLevel}
          />
          <Reveal>
            <ReviewForm />
          </Reveal>
        </div>
      </section>
    );
  }

  return (
    <section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeading
          eyebrow="reviews --approved"
          title="Отзывы клиентов"
          desc="Публикуются после проверки менеджером - это защищает страницу от спама и фейков."
          level={headingLevel}
        />
        <div className={cx('grid gap-10', showForm && 'md:grid-cols-2')}>
          <Reveal>
            <div className="space-y-4">
              {list.map((r) => (
                <div key={r.id} className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
                  <div className="flex items-center gap-1 mb-2">
                    {[1, 2, 3, 4, 5].map((n) => (
                      <Star key={n} className={cx('h-4 w-4', n <= r.rating ? 'fill-amber-400 text-amber-400' : 'text-slate-300')} />
                    ))}
                  </div>
                  <p className="text-sm mb-3">{r.text}</p>
                  <p className="text-xs text-slate-400 dark:text-slate-500">
                    {r.name}
                    {r.role ? ` · ${r.role}` : ''}
                  </p>
                </div>
              ))}
            </div>
            {moreHref && (
              <Link href={moreHref} className="mt-6 inline-block text-sm text-emerald-500 font-medium hover:underline">
                Все отзывы →
              </Link>
            )}
          </Reveal>

          {showForm && (
            <Reveal delay={100}>
              <ReviewForm />
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}