Feature Comparison

interface ComparisonPlan {
 id: string
 name: string
 description?: string
 price?: string | number
 priceLabel?: string // e.g., "/month"
 highlighted?: boolean // Emphasize this plan
 badge?: string // e.g., "Popular"
}

interface ComparisonFeature {
 name: string
 category?: string // For grouping features
 tooltip?: string
 values: Record<string, boolean | string>
 // Keys match plan IDs, values can be:
 // - true: Show checkmark
 // - false: Show X
 // - string: Show custom text
}

import { FeatureComparison, SimpleComparison } from '@/blocks/data-display/feature-comparison'

// Full feature comparison
<FeatureComparison
 plans={[
 { id: 'free', name: 'Free', price: 0, priceLabel: '/mo' },
 { id: 'pro', name: 'Pro', price: 29, priceLabel: '/mo', highlighted: true, badge: 'Popular' },
 { id: 'enterprise', name: 'Enterprise', price: 'Custom' },
 ]}
 features={[
 { name: 'Users', category: 'Limits', values: { free: '1', pro: '10', enterprise: 'Unlimited' } },
 { name: 'Storage', category: 'Limits', values: { free: '1 GB', pro: '100 GB', enterprise: 'Unlimited' } },
 { name: 'Priority support', category: 'Support', values: { free: false, pro: true, enterprise: true } },
 ]}
 showCategories={true}
/>

// Simple two-column comparison
<SimpleComparison
 headers={['Basic', 'Pro']}
 items={[
 { feature: 'Users', optionA: '5', optionB: 'Unlimited' },
 { feature: 'Storage', optionA: '10 GB', optionB: '100 GB' },
 { feature: 'Priority support', optionA: false, optionB: true },
 ]}
/>