'use client';

import { TabProps } from '../types';

export function ReviewsTab({ data, onToggle, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div>
        <div className="flex items-center gap-3 p-4 rounded-lg border" style={{ 
          borderColor: 'var(--color-border)',
          background: 'var(--color-surface-alt)'
        }}>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={data.enable_reviews ?? true}
              onChange={() => onToggle('enable_reviews')}
              disabled={!canUpdate}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-cta/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cta" style={{
              background: data.enable_reviews ? 'var(--color-cta)' : 'var(--color-border)',
            }}></div>
            <span className="ml-3 text-sm font-medium" style={{ color: 'var(--color-text)' }}>
              {data.enable_reviews ? 'Enabled' : 'Disabled'}
            </span>
          </label>
        </div>
        
        <p className="text-xs mt-2" style={{ color: 'var(--color-text-tertiary)' }}>
          Allow customers to leave reviews and ratings on product pages
        </p>
      </div>

      <div className="p-4 rounded-lg" style={{ 
        background: 'var(--color-surface-alt)',
        border: '1px solid var(--color-border)'
      }}>
        <h4 className="text-sm font-medium mb-2" style={{ color: 'var(--color-text-secondary)' }}>
          What this does:
        </h4>
        <ul className="text-xs space-y-1" style={{ color: 'var(--color-text-tertiary)' }}>
          <li>• Enable/disable product review system</li>
          <li>• Customers can rate products (1-5 stars)</li>
          <li>• Reviews appear on product detail pages</li>
          <li>• Admin can moderate reviews from dashboard</li>
        </ul>
      </div>
    </div>
  );
}