import { CheckCircle, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";

interface PricingTier {
    name: string;
    price: string;
    description: string;
    features: string[];
    popular?: boolean;
    promo?: string;
}

interface PricingProps {
    title?: string;
    subtitle?: string;
    tiers: PricingTier[];
}

const Pricing = ({ title = "Nos forfaits", subtitle = "Simple et transparent", tiers }: PricingProps) => {
    return (
        <section className="py-16 md:py-24 bg-muted/30">
            <div className="container mx-auto px-4">
                {(title || subtitle) && (
                    <div className="text-center max-w-2xl mx-auto mb-12">
                        <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 font-display">{title}</h2>
                        <p className="text-muted-foreground">{subtitle}</p>
                    </div>
                )}

                <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    {tiers.map((tier, index) => (
                        <Card
                            key={index}
                            className={`relative ${tier.popular ? "border-primary border-2 shadow-xl" : ""}`}
                        >
                            {tier.popular && (
                                <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
                                    Recommandé
                                </span>
                            )}

                            <CardHeader className="text-center pt-8">
                                <CardTitle className="text-2xl">{tier.name}</CardTitle>
                                <CardDescription>{tier.description}</CardDescription>
                                <div className="mt-4">
                                    <span className="text-4xl font-bold text-primary">{tier.price}</span>
                                    <span className="text-muted-foreground text-sm">/mois</span>
                                </div>
                            </CardHeader>

                            <CardContent>
                                <ul className="space-y-3 mb-6">
                                    {tier.features.map((feature, i) => (
                                        <li key={i} className="flex items-start gap-3 text-sm text-muted-foreground">
                                            <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                                            <span>{feature}</span>
                                        </li>
                                    ))}
                                </ul>

                                <Button
                                    className="w-full"
                                    variant={tier.popular ? "default" : "outline"}
                                    asChild
                                >
                                    <a href="/#contact">Choisir ce forfait <ArrowRight className="w-4 h-4 ml-2" /></a>
                                </Button>
                                {tier.promo && (
                                    <p className="text-xs text-primary text-center font-medium mt-4">
                                        {tier.promo}
                                    </p>
                                )}
                            </CardContent>
                        </Card>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Pricing;