import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
 
import { Check } from 'lucide-react';
 
interface Plan {
    id: string;
    title: string;
    description: string;
    price: number;
    features: string[];
    href: string;
}
 
const plans: Plan[] = [
    {
        id: 'premium',
        title: 'Premium',
        description: 'For hobby projects and personal websites',
        price: 129,
        features: ['Basic components', 'Use in unlimited project', 'Access to community forum', 'Detailed documentation', 'Regular updates'],
        href: '#',
    },
];
 
export default function PricingSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">Our Premium Package</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
 
                <div className="mx-auto mt-12 space-y-8">
                    {plans.map((plan) => (
                        <Card key={plan.id} className="sm:pr-6 sm:pl-6 lg:pr-0">
                            <CardContent className="grid gap-8 lg:grid-cols-3">
                                <div className="py-6 lg:col-span-2">
                                    <h3 className="text-2xl font-semibold tracking-tight">{plan.title}</h3>
                                    <p className="text-muted-foreground mt-4 text-base/7">{plan.description}</p>
                                    <div className="mt-12 flex items-center gap-x-4">
                                        <h3 className="flex-none text-sm font-medium">What's included</h3>
                                        <Separator className="flex-auto" />
                                    </div>
                                    <ul className="text-muted-foreground mt-8 grid grid-cols-1 gap-4 text-sm leading-6 sm:grid-cols-2">
                                        {plan.features.map((feature, index) => (
                                            <li key={index} className="flex items-center gap-2">
                                                <Check className="size-4 flex-none text-green-600" />
                                                {feature}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
 
                                <Card className="bg-muted justify-center text-center shadow-none">
                                    <CardContent className="mx-auto max-w-xs">
                                        <p className="text-muted-foreground text-base font-semibold">Pay Monthly</p>
                                        <p className="mt-4 flex items-baseline justify-center gap-x-2">
                                            <span className="text-5xl/tight font-bold tracking-tight">${plan.price}</span>
                                        </p>
                                        <Button className="mt-6 w-full" size="lg" asChild>
                                            <a href={plan.href}>Get started</a>
                                        </Button>
                                        <p className="text-muted-foreground mt-4 text-xs/5">
                                            By purchasing this plan, you agree to our <br className="hidden sm:inline-block" />
                                            <a href="#" className="text-foreground">
                                                terms of service
                                            </a>{' '}
                                            and{' '}
                                            <a href="#" className="text-foreground">
                                                privacy policy
                                            </a>
                                        </p>
                                    </CardContent>
                                </Card>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            </div>
        </section>
    );
}