import { solutions, type Locale } from "@/content/site";
import { translations } from "@/content/translations";
import { sectionLabels, solutionCapabilities } from "@/content/pageContent";

export function SolutionsGrid({ locale, compact = false }: { locale: Locale; compact?: boolean }) {
  const t = translations[locale];
  return (
    <div className={compact ? "solutions-grid compact" : "solutions-grid"}>
      {solutions.map((solution, index) => (
        <article className="solution-card" key={solution} data-reveal>
          <span className="card-index">{String(index + 1).padStart(2, "0")}</span>
          <span className="card-system-line" aria-hidden="true" />
          <h3>{t.solutions[solution].name}</h3>
          <p className="solution-label">{sectionLabels[locale].objective}</p>
          <p className="problem">{t.solutions[solution].problem}</p>
          <p className="solution-outcome">{t.solutions[solution].outcome}</p>
          {!compact && (
            <div className="solution-capabilities">
              <p className="solution-label">{sectionLabels[locale].capabilities}</p>
              <ul>
                {solutionCapabilities[locale][solution].map((capability) => (
                  <li key={capability}>{capability}</li>
                ))}
              </ul>
            </div>
          )}
        </article>
      ))}
    </div>
  );
}