'use client';

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

type BillingCycle = 'monthly' | 'annual';

interface PricingToggleProps {
  value: BillingCycle;
  onChange: (cycle: BillingCycle) => void;
  savingsPercent?: number;
}

export function PricingToggle({
  value,
  onChange,
  savingsPercent = 20,
}: PricingToggleProps) {
  const cycles: BillingCycle[] = ['monthly', 'annual'];

  return (
    <div className="inline-flex items-center gap-1 rounded-full p-1 bg-white/5 border border-white/10">
      {cycles.map((cycle) => {
        const isActive = value === cycle;
        const label = cycle === 'monthly' ? 'Monthly' : 'Annual';

        return (
          <button
            key={cycle}
            onClick={() => onChange(cycle)}
            aria-pressed={isActive}
            className={cn(
              'relative inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
              isActive ? 'text-white' : 'text-gray-400 hover:text-gray-200'
            )}
          >
            {isActive && (
              <motion.div
                layoutId="pricing-toggle-pill"
                className="absolute inset-0 rounded-full bg-violet-600"
                transition={{ type: 'spring', damping: 30, stiffness: 400 }}
              />
            )}
            <span className="relative">{label}</span>
            {cycle === 'annual' && (
              <span
                className={cn(
                  'relative rounded-full px-1.5 py-0.5 text-xs font-semibold',
                  isActive
                    ? 'bg-white/20 text-white'
                    : 'bg-violet-500/20 text-violet-400'
                )}
              >
                Save {savingsPercent}%
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}
