import { Card, SectionHeader } from "denjs-ui";
import { getProblems } from "#/entities/landing";
import { useMessages } from "#/shared/lib/i18n";

export function ProblemSection() {
	const m = useMessages();

	return (
		<section id="problem" className="mt-10 sm:mt-14">
			<SectionHeader
				eyebrow={m.problem_eyebrow()}
				title={m.problem_title()}
				subtitle={m.problem_subtitle()}
				align="left"
				className="max-w-3xl"
			/>

			<div className="mt-5 grid gap-4 md:grid-cols-3">
				{getProblems(m).map((item, index) => (
					<Card
						key={item.title}
						title={item.title}
						description={item.text}
						padding="lg"
						className="feature-card rise-in rounded-2xl"
						style={{ animationDelay: `${index * 90 + 110}ms` }}
					/>
				))}
			</div>
		</section>
	);
}