/**
 * Preferences Step Component
 * Terms acceptance and marketing preferences
 */

"use client";

import Link from "next/link";

interface PreferencesStepProps {
  formData: {
    acceptTerms: boolean;
    marketingConsent: boolean;
  };
  errors: {
    acceptTerms?: string;
  };
  onFieldChange: (field: string, value: boolean) => void;
  onFieldBlur: (field: string) => void;
  loading?: boolean;
}

export function PreferencesStep({
  formData,
  errors,
  onFieldChange,
  onFieldBlur,
  loading = false,
}: PreferencesStepProps) {
  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <div className="flex items-start space-x-3">
          <input
            type="checkbox"
            id="acceptTerms"
            checked={formData.acceptTerms}
            onChange={e => onFieldChange("acceptTerms", e.target.checked)}
            onBlur={() => onFieldBlur("acceptTerms")}
            disabled={loading}
            className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
          />
          <div className="flex-1">
            <label htmlFor="acceptTerms" className="text-sm text-gray-900">
              I accept the{" "}
              <Link href="/terms" className="text-blue-600 hover:text-blue-500 underline">
                Terms and Conditions
              </Link>{" "}
              and{" "}
              <Link href="/privacy" className="text-blue-600 hover:text-blue-500 underline">
                Privacy Policy
              </Link>
              <span className="text-red-500 ml-1">*</span>
            </label>
            {errors.acceptTerms && (
              <p className="mt-1 text-sm text-red-600">{errors.acceptTerms}</p>
            )}
          </div>
        </div>

        <div className="flex items-start space-x-3">
          <input
            type="checkbox"
            id="marketingConsent"
            checked={formData.marketingConsent}
            onChange={e => onFieldChange("marketingConsent", e.target.checked)}
            disabled={loading}
            className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
          />
          <label htmlFor="marketingConsent" className="text-sm text-gray-900">
            I would like to receive marketing communications and product updates
          </label>
        </div>
      </div>

      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h4 className="text-sm font-medium text-blue-900 mb-2">Almost done!</h4>
        <p className="text-sm text-blue-700">
          By clicking &quot;Create Account&quot;, you&apos;ll be able to access your dashboard and
          start using our services immediately.
        </p>
      </div>
    </div>
  );
}
