Pricing Tier Card

'use client';

import type { ReactNode } from 'react';
import './PricingCard.css';

/** class:list → className */
function cx(...args: unknown[]): string {
  const out: string[] = [];
  const walk = (v: unknown) => {
    if (!v) return;
    if (typeof v === 'string' || typeof v === 'number') out.push(String(v));
    else if (Array.isArray(v)) v.forEach(walk);
    else if (typeof v === 'object') for (const [k, on] of Object.entries(v as Record<string, unknown>)) if (on) out.push(k);
  };
  args.forEach(walk);
  return out.join(' ');
}

/**
 * PricingCard — Optimized card for showing product plans and features.
 * 
 * @param {string} plan - The plan name (e.g. "Pro").
 * @param {string} price - The integer/decimal price value.
 * @param {boolean} featured - Applies a highlighted styling variant if true.
 */
export interface PricingCardProps {
  plan: string;
  price: string;
  featured?: boolean;
  children?: ReactNode;
}

export function PricingCard({ plan, price, featured = false,
  children
}: PricingCardProps) {
  return (
    <>
      <div className={cx(["price-card", { "featured": featured }])} data-rk-29b1af="">
        <span className="price-card__plan" data-rk-29b1af="">{plan}</span>
        <div className="price-card__price" data-rk-29b1af=""><span data-rk-29b1af="">$</span>{price}</div>
        <ul className="price-card__features" data-rk-29b1af="">
          {children}
        </ul>
        <button className="price-card__btn" type="button" data-rk-29b1af="">Choose Plan</button>
      </div>
    </>
  );
}

export default PricingCard;

/* PricingCard — ported from astro-component-kit (cards/PricingCard.astro) */

.price-card:where([data-rk-29b1af]) { 
  background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-xl, 24px); 
  padding: var(--sp-10, 2.5rem); 
  display: flex; flex-direction: column; gap: var(--sp-6, 1.5rem); 
}
.featured:where([data-rk-29b1af]) { 
  border-color: var(--c-primary, #6366f1); 
  background: rgba(99,102,241,0.05); 
  transform: scale(1.05); 
}
.price-card__plan:where([data-rk-29b1af]) { font-size: 1.1rem; font-weight: 600; color: var(--c-text-1, #fff); }
.price-card__price:where([data-rk-29b1af]) { font-size: 2.5rem; font-weight: 800; color: var(--c-text-1, #fff); }
.price-card__price:where([data-rk-29b1af]) span:where([data-rk-29b1af]) { font-size: 1.2rem; opacity: 0.7; margin-right: 2px; }

.price-card__features:where([data-rk-29b1af]) { 
  list-style: none; padding: 0; margin: 0;
  font-size: 0.9rem; color: var(--c-text-2, #94a3b8); 
  display: flex; flex-direction: column; gap: 0.5rem;
}

/* Global sub-selector rule to style slotted list items cleanly */
.price-card__features:where([data-rk-29b1af]) li { position: relative; padding-left: 1.5rem; }
.price-card__features:where([data-rk-29b1af]) li::before { 
  content: "✓"; position: absolute; left: 0; color: var(--c-primary, #6366f1); 
}

.price-card__btn:where([data-rk-29b1af]) { 
  background: var(--c-primary, #6366f1); color: #fff; 
  border: none; padding: 0.8rem; border-radius: var(--r-md, 12px); 
  font-weight: 700; cursor: pointer; transition: 0.2s;
}