import SectionHeader from "@/components/home/SectionHeader";
import type { getHomeData, Tone } from "@/data/home.data";

export const toneClasses: Record<Tone, string> = {
  violet: "bg-[#f2f0ff] text-[#7762ec]",
  blue: "bg-[#eef6ff] text-[#4b8be9]",
  green: "bg-[#ecfbf5] text-[#30b477]",
  orange: "bg-[#fff3e6] text-[#f49b42]",
  rose: "bg-[#fff0ef] text-[#ef796e]",
};

export default function FeaturesSection({
  features,
  title,
}: {
  features: ReturnType<typeof getHomeData>["features"];
  title: string;
}) {
  return (
    <section id="solutions" className="mx-auto max-w-[1360px] scroll-mt-20 px-6 py-8 xl:px-8">
      <SectionHeader title={title} />

      <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-9">
        {features.map((feature) => {
          const Icon = feature.icon;
          return (
            <article
              key={feature.title}
              className="min-h-[150px] rounded-[12px] border border-[#e8edf5] bg-white px-2.5 py-3.5 text-center shadow-[0_4px_12px_rgba(51,66,116,0.035)] transition-transform hover:-translate-y-1"
            >
              <div className={`mx-auto grid h-9 w-9 place-items-center rounded-lg ${toneClasses[feature.tone]}`}>
                <Icon size={18} strokeWidth={1.8} />
              </div>
              <h3 className="mt-3 text-[12px] font-extrabold leading-4 text-[#273154]">{feature.title}</h3>
              <p className="mt-1.5 text-[10px] leading-[1.55] text-[#8490a6]">{feature.desc}</p>
            </article>
          );
        })}
      </div>
    </section>
  );
}