import { CheckCircle2, XCircle } from "lucide-react";

import SectionHeader from "@/components/home/SectionHeader";
import type { Dictionary } from "@/lib/i18n";

export default function GrowthSection({ dictionary }: { dictionary: Dictionary }) {
  const columns = [
    {
      items: dictionary.growth.problems,
      title: dictionary.home.problemsTitle,
      tone: "border-rose-100 bg-rose-50/60 text-rose-600",
      icon: XCircle,
    },
    {
      items: dictionary.growth.solutions,
      title: dictionary.home.solutionsTitle,
      tone: "border-emerald-100 bg-emerald-50/60 text-emerald-600",
      icon: CheckCircle2,
    },
  ];

  return (
    <section className="mx-auto max-w-[1360px] px-6 py-9 xl:px-8">
      <SectionHeader
        title={dictionary.home.growthTitle}
        subtitle={dictionary.home.growthSubtitle}
      />
      <div className="mx-auto mt-5 grid max-w-[1040px] gap-4 md:grid-cols-2">
        {columns.map((column) => (
          <article
            key={column.title}
            className={`rounded-2xl border p-5 shadow-[0_8px_22px_rgba(51,66,116,0.04)] ${column.tone}`}
          >
            <h3 className="text-[17px] font-extrabold text-[#202b50]">{column.title}</h3>
            <div className="mt-4 space-y-3">
              {column.items.map((item) => (
                <p key={item} className="flex gap-2.5 text-[13px] leading-6 text-[#63708d]">
                  <column.icon size={17} className="mt-1 shrink-0" />
                  {item}
                </p>
              ))}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}