"use client";

import { AlertTriangle } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { useLanguage } from "@/lib/i18n/context";

export function Problem() {
  const { t } = useLanguage();

  return (
    <section className="py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.problem.eyebrow}
          title={t.problem.title}
          description={t.problem.description}
        />

        <div className="grid gap-4 sm:grid-cols-2">
          {t.problem.items.map((problem, i) => (
            <FadeIn
              key={problem.title}
              delay={i * 0.06}
              className="flex gap-4 rounded-xl border border-border bg-card/50 p-5"
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
                <AlertTriangle className="size-4" />
              </span>
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground">
                  {problem.title}
                </p>
                <p className="text-sm text-muted-foreground">
                  {problem.description}
                </p>
              </div>
            </FadeIn>
          ))}
        </div>
      </Container>
    </section>
  );
}