import Link from 'next/link';
import Reveal from '../Reveal.jsx';
import SectionHeading from '../SectionHeading.jsx';
import StatusDot from '../StatusDot.jsx';

export default function Cases({ cases, limit, moreHref, showDisclaimer = false, headingLevel = 'h2' }) {
  if (cases.length === 0) return null;
  const list = limit ? cases.slice(0, limit) : cases;

  return (
    <section id="cases" className="max-w-6xl mx-auto px-5 sm:px-8 py-20">
      <SectionHeading eyebrow="cases --log" title="Кейсы и портфолио" level={headingLevel} />
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {list.map((c, i) => (
          <Reveal key={c.id} delay={i * 60}>
            <div className="h-full rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
              <div className="flex items-center justify-between mb-3">
                {c.tag && (
                  <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                    {c.tag}
                  </span>
                )}
                <StatusDot tone={c.tone} label={c.status} mono />
              </div>
              <h3 className="font-bold mb-2 font-display text-[15px]">{c.title}</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">{c.description}</p>
            </div>
          </Reveal>
        ))}
      </div>

      {moreHref && (
        <Reveal className="mt-8">
          <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
            Все кейсы →
          </Link>
        </Reveal>
      )}

      {showDisclaimer && (
        <Reveal className="mt-8">
          <p className="text-xs text-slate-400 dark:text-slate-500">
            * Показатели по срокам, объёмам и улучшениям — ориентировочные оценки по внутренним данным, точные цифры
            уточняются и согласовываются с клиентом по каждому проекту.
          </p>
        </Reveal>
      )}
    </section>
  );
}