import React from 'react';
import { Switch } from '@headlessui/react';
import { useTheme } from '@/lib/theme-context';

interface PricingToggleProps {
  isYearly: boolean;
  onToggle: () => void;
}

const PricingToggle: React.FC<PricingToggleProps> = ({ isYearly, onToggle }) => {
  const { theme } = useTheme();

  const thumbColor = theme === 'dark' ? 'bg-white' : 'bg-gray-900';
  const trackColor = theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200';
  const activeTrackColor = theme === 'dark' ? 'bg-indigo-600' : 'bg-indigo-500';

  return (
    <div className="flex items-center justify-center mt-12 space-x-4">
      <span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
        Monthly
      </span>
      <div className="relative inline-flex items-center">
        <Switch
          checked={isYearly}
          onChange={onToggle}
          className={`relative inline-flex items-center h-6 rounded-full w-16 transition-colors duration-200 ease-in-out ${
            isYearly ? activeTrackColor : trackColor
          }`}
        >
          <span
            className={`inline-block w-7 h-5 transform rounded-full shadow transition-transform duration-200 ease-in-out ${
              isYearly ? 'translate-x-8' : 'translate-x-0'
            } ${thumbColor}`}
          />
        </Switch>
      </div>
      <span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
        Yearly
      </span>
    </div>
  );
};

export default PricingToggle;