"use client";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { IconBadge } from "./IconBadge";
import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";
import { WHY_FEATURES } from "./lib/content";

/** Value props: a grid of reasons to choose WASHY. */
export function WhyChooseSection() {
  const { t } = useTranslation();

  return (
    <Section className="bg-background">
      <div className="flex flex-col gap-10">
        <SectionHeading
          eyebrow={t("home.why.eyebrow")}
          title={t("home.why.title")}
          subtitle={t("home.why.subtitle")}
        />

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {WHY_FEATURES.map(({ key, icon }) => (
            <div
              key={key}
              className="flex items-start gap-4 rounded-[20px] border border-border bg-white p-5 shadow-xs transition-shadow hover:shadow-md"
            >
              <IconBadge icon={icon} />
              <div className="flex flex-col gap-1">
                <Typography as="h3" variant="h3">
                  {t(`home.why.items.${key}.title`)}
                </Typography>
                <Typography variant="body" color="secondary">
                  {t(`home.why.items.${key}.description`)}
                </Typography>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}