claudetools/projects/msp-tools/quote-wizard/frontend/src/components/pricing/TierComparison.tsx

import { Check, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { PricingTier } from '@/types/quote';

export interface TierComparisonProps {
  tiers: PricingTier[];
  selectedTier?: string;
  onSelectTier: (tierId: string) => void;
}

interface FeatureRow {
  name: string;
  essential: boolean | string;
  professional: boolean | string;
  enterprise: boolean | string;
}

const comparisonFeatures: FeatureRow[] = [
  { name: 'Remote Monitoring', essential: true, professional: true, enterprise: true },
  { name: 'Help Desk Support', essential: '8x5', professional: '24x7', enterprise: '24x7 Priority' },
  { name: 'Patch Management', essential: true, professional: true, enterprise: true },
  { name: 'Antivirus Protection', essential: 'Basic', professional: 'Advanced', enterprise: 'Advanced' },
  { name: 'Backup & Recovery', essential: false, professional: true, enterprise: true },
  { name: 'Network Monitoring', essential: false, professional: true, enterprise: true },
  { name: 'On-Site Support', essential: false, professional: 'Limited', enterprise: 'Unlimited' },
  { name: 'Vendor Management', essential: false, professional: true, enterprise: true },
  { name: 'Dedicated Account Manager', essential: false, professional: false, enterprise: true },
  { name: 'Virtual CIO Services', essential: false, professional: false, enterprise: true },
  { name: 'Compliance Management', essential: false, professional: false, enterprise: true },
  { name: 'Security Training', essential: false, professional: false, enterprise: true },
  { name: 'Business Reviews', essential: 'Annual', professional: 'Quarterly', enterprise: 'Monthly' },
];

export function TierComparison({ tiers, selectedTier, onSelectTier }: TierComparisonProps) {
  const renderCell = (value: boolean | string) => {
    if (typeof value === 'boolean') {
      return value ? (
        <div className="w-5 h-5 rounded-full bg-[#ecfdf5] flex items-center justify-center mx-auto">
          <Check className="w-3 h-3 text-[#059669]" strokeWidth={3} />
        </div>
      ) : (
        <X className="w-4 h-4 text-gray-200 mx-auto" />
      );
    }
    return (
      <span className="text-sm font-medium text-[#333d49]"
            style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
        {value}
      </span>
    );
  };

  return (
    <div className="overflow-x-auto rounded-xl border border-gray-200/80 shadow-card">
      <table className="w-full border-collapse">
        <thead>
          <tr>
            <th className="text-left p-4 border-b border-gray-100 bg-[#f8f9fb]">
              <span className="font-bold text-[#333d49] text-sm"
                    style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                Feature
              </span>
            </th>
            {tiers.map((tier) => (
              <th
                key={tier.id}
                className={cn(
                  'p-4 border-b border-gray-100 text-center cursor-pointer transition-all duration-200',
                  selectedTier === tier.id
                    ? 'bg-[#fe7400]/5'
                    : 'bg-[#f8f9fb] hover:bg-gray-100'
                )}
                onClick={() => onSelectTier(tier.id)}
              >
                <span
                  className={cn(
                    'font-bold text-sm',
                    selectedTier === tier.id ? 'text-[#fe7400]' : 'text-[#333d49]'
                  )}
                  style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
                >
                  {tier.name}
                </span>
                {tier.recommended && (
                  <span className="block text-[10px] text-[#fe7400] mt-0.5 font-bold uppercase tracking-wider"
                        style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                    Recommended
                  </span>
                )}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {comparisonFeatures.map((feature, index) => (
            <tr key={feature.name} className={index % 2 === 0 ? 'bg-white' : 'bg-[#f8f9fb]/50'}>
              <td className="p-4 border-b border-gray-50 text-sm text-gray-500">
                {feature.name}
              </td>
              <td
                className={cn(
                  'p-4 border-b border-gray-50 text-center',
                  selectedTier === 'essential' && 'bg-[#fe7400]/3'
                )}
              >
                {renderCell(feature.essential)}
              </td>
              <td
                className={cn(
                  'p-4 border-b border-gray-50 text-center',
                  selectedTier === 'professional' && 'bg-[#fe7400]/3'
                )}
              >
                {renderCell(feature.professional)}
              </td>
              <td
                className={cn(
                  'p-4 border-b border-gray-50 text-center',
                  selectedTier === 'enterprise' && 'bg-[#fe7400]/3'
                )}
              >
                {renderCell(feature.enterprise)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}