import { IconAlertTriangle } from "@tabler/icons-react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { Container } from "@/components/ui/container";
import { SectionHead } from "@/components/ui/section-head";

import { ProblemBeam } from "./beam";

export const Problem = ({ dict }: { dict: Dictionary["problem"] }) => {
  return (
    <section className="relative overflow-hidden py-10 md:py-20 lg:py-32">
      <div
        aria-hidden
        className="brand-glow pointer-events-none absolute top-1/3 left-1/2 -z-10 h-[380px] w-[760px] -translate-x-1/2 opacity-50"
      />
      <Container>
        <SectionHead
          center
          eyebrow={dict.eyebrow}
          title={dict.title}
          titleGrad={dict.title_grad}
          subtitle={dict.subtitle}
        />

        <ProblemBeam />

        <div className="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {dict.points.map((point, idx) => (
            <div
              key={`problem-point-${idx}`}
              className="border-hairline bg-surface hover:border-hairline-2 hover:bg-surface-2 rounded-2xl border p-[22px] transition-all duration-300 hover:-translate-y-1"
            >
              <div className="bg-brand-orange/12 flex size-[38px] items-center justify-center rounded-[10px] text-[#ff7a52]">
                <IconAlertTriangle className="size-[18px]" />
              </div>
              <h3 className="text-ink-1 mt-4 text-base font-bold">
                {point.title}
              </h3>
              <p className="text-ink-3 mt-2 text-[13.5px] leading-relaxed">
                {point.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};