import React from 'react';
import { cn } from '@/lib/utils';

interface BillingToggleProps {
  value: 'month' | 'year';
  onChange: (value: 'month' | 'year') => void;
}

export const BillingToggle: React.FC<BillingToggleProps> = ({ value, onChange }) => {
  return (
    <div className="inline-flex items-center rounded-lg border border-gray-300 bg-gray-50 p-1">
      <button
        type="button"
        onClick={() => onChange('month')}
        className={cn(
          'px-6 py-2 text-sm font-medium rounded-md transition-all duration-200',
          value === 'month'
            ? 'bg-primary-600 text-white shadow-sm'
            : 'bg-transparent text-gray-700 hover:bg-gray-100'
        )}
      >
        Monthly
      </button>
      <button
        type="button"
        onClick={() => onChange('year')}
        className={cn(
          'px-6 py-2 text-sm font-medium rounded-md transition-all duration-200',
          value === 'year'
            ? 'bg-primary-600 text-white shadow-sm'
            : 'bg-transparent text-gray-700 hover:bg-gray-100'
        )}
      >
        Yearly
      </button>
    </div>
  );
};