import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { plans } from "../data/pricing-data";
import { Button } from "@/components/ui/button";

export default function Pricing() {
	return (
		<div className="max-w-4xl text-center">
			<h2 id="pricing" className="mb-6 text-3xl font-bold">Pricing Plans</h2>
			<p className="mb-6 text-gray-600">
				Prices are subject to change. These estimates help guide your decision.
			</p>
			<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
				{plans.map((plan, index) => (
					<Card key={index} className="p-4">
						<CardHeader>
							<CardTitle>{plan.title}</CardTitle>
						</CardHeader>
						<CardContent>
							<p className="mb-4 text-xl font-semibold">{plan.price}</p>
							<p className="mb-4 text-gray-600">{plan.description}</p>
							<ul className="mb-4 text-left">
								{plan.features.map((feature, i) => (
									<li key={i} className="list-inside list-disc text-sm">
										{feature}
									</li>
								))}
							</ul>
							<Button>Choose Plan</Button>
						</CardContent>
					</Card>
				))}
			</div>
		</div>
	);
}