Pricing Comparison

import { Check, X, LucideIcon } from "lucide-react";
import { ReactNode } from "react";
 
interface ComparisonFeature {
  name: string;
  description?: string;
  basic: boolean | string | ReactNode;
  pro: boolean | string | ReactNode;
  enterprise: boolean | string | ReactNode;
}
 
interface PricingComparisonProps {
  headline?: string;
  description?: string;
  plans: {
    basic: {
      name: string;
      price: string;
      period?: string;
      description?: string;
      icon?: LucideIcon;
      highlighted?: boolean;
    };
    pro: {
      name: string;
      price: string;
      period?: string;
      description?: string;
      icon?: LucideIcon;
      highlighted?: boolean;
    };
    enterprise: {
      name: string;
      price: string;
      period?: string;
      description?: string;
      icon?: LucideIcon;
      highlighted?: boolean;
    };
  };
  features: ComparisonFeature[];
}
 
export function PricingComparison({
  headline = "Compare plans",
  description,
  plans,
  features,
}: PricingComparisonProps) {
  const renderValue = (value: boolean | string | ReactNode) => {
    if (typeof value === "boolean") {
      return value ? (
        <Check className="h-5 w-5 text-emerald-400" />
      ) : (
        <X className="h-5 w-5 text-zinc-600" />
      );
    }
    return <span className="text-sm font-medium text-white">{value}</span>;
  };
 
  const PlanCard = ({
    plan,
    type,
  }: {
    plan: (typeof plans)[keyof typeof plans];
    type: string;
  }) => {
    const Icon = plan.icon;
    return (
      <div
        className={`relative rounded-2xl border p-6 transition-all ${
          plan.highlighted
            ? "border-blue-500/50 bg-gradient-to-b from-blue-500/10 to-transparent"
            : "border-zinc-800/50 bg-zinc-950"
        }`}
      >
        {plan.highlighted && (
          <div className="absolute -top-3 left-1/2 -translate-x-1/2">
            <span className="rounded-full bg-blue-500 px-3 py-1 text-xs font-semibold text-white">
              Popular
            </span>
          </div>
        )}
        <div className="text-center">
          {Icon && (
            <div className="mb-4 flex justify-center">
              <div className="rounded-lg bg-blue-500/10 p-3">
                <Icon className="h-6 w-6 text-blue-400" />
              </div>
            </div>
          )}
          <h3 className="text-xl font-bold text-white">{plan.name}</h3>
          {plan.description && (
            <p className="mt-2 text-sm text-zinc-500">{plan.description}</p>
          )}
          <div className="mt-4">
            <span className="text-4xl font-bold text-white">{plan.price}</span>
            {plan.period && (
              <span className="ml-2 text-sm text-zinc-500">{plan.period}</span>
            )}
          </div>
        </div>
      </div>
    );
  };
 
  return (
    <section className="w-full bg-black py-12 sm:py-16 lg:py-20 z-30">
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-3xl space-y-4 text-center">
          <h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl">
            {headline}
          </h2>
          {description && (
            <p className="text-lg text-zinc-400 md:text-xl">{description}</p>
          )}
        </div>
 
        <div className="mx-auto mt-12 max-w-7xl">
          <div className="hidden lg:grid lg:grid-cols-4 lg:gap-6">
            <div className="p-6" />
            <PlanCard plan={plans.basic} type="basic" />
            <PlanCard plan={plans.pro} type="pro" />
            <PlanCard plan={plans.enterprise} type="enterprise" />
          </div>
 
          <div className="mt-8 overflow-hidden rounded-2xl border border-zinc-800/50 bg-zinc-950">
            <div className="border-b border-zinc-800/50 p-4 lg:hidden">
              <select className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2 text-white">
                <option>{plans.basic.name}</option>
                <option>{plans.pro.name}</option>
                <option>{plans.enterprise.name}</option>
              </select>
            </div>
 
            <div className="divide-y divide-zinc-800/50">
              {features.map((feature, index) => (
                <div
                  key={index}
                  className="grid grid-cols-1 gap-4 p-6 transition-colors hover:bg-zinc-900/30 lg:grid-cols-4 lg:items-center"
                >
                  <div>
                    <h4 className="font-semibold text-white">{feature.name}</h4>
                    {feature.description && (
                      <p className="mt-1 text-sm text-zinc-500">
                        {feature.description}
                      </p>
                    )}
                  </div>
                  <div className="flex items-center justify-center lg:justify-center">
                    <div className="lg:hidden mr-auto text-sm text-zinc-500">
                      {plans.basic.name}:
                    </div>
                    {renderValue(feature.basic)}
                  </div>
                  <div className="flex items-center justify-center lg:justify-center">
                    <div className="lg:hidden mr-auto text-sm text-zinc-500">
                      {plans.pro.name}:
                    </div>
                    {renderValue(feature.pro)}
                  </div>
                  <div className="flex items-center justify-center lg:justify-center">
                    <div className="lg:hidden mr-auto text-sm text-zinc-500">
                      {plans.enterprise.name}:
                    </div>
                    {renderValue(feature.enterprise)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}