/**
 * ContactInfoFields - Reusable contact information form fields
 *
 * Used by: SupplierWizard, CustomerWizard, TeamMemberWizard
 */

import React from 'react';
import { useTranslation } from 'react-i18next';

interface ContactInfoFieldsProps {
  data: {
    email?: string;
    phone?: string;
    contactName?: string;
  };
  onFieldChange: (field: string, value: string) => void;
  showContactName?: boolean;
  required?: {
    email?: boolean;
    phone?: boolean;
    contactName?: boolean;
  };
  labels?: {
    email?: string;
    phone?: string;
    contactName?: string;
  };
}

export const ContactInfoFields: React.FC<ContactInfoFieldsProps> = ({
  data,
  onFieldChange,
  showContactName = false,
  required = {},
  labels = {},
}) => {
  const { t } = useTranslation('wizards');

  return (
    <div className="space-y-4">
      {/* Contact Name (optional, shown for suppliers) */}
      {showContactName && (
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {labels.contactName || t('common.fields.contactName')}
            {required.contactName && ' *'}
          </label>
          <input
            type="text"
            value={data.contactName || ''}
            onChange={(e) => onFieldChange('contactName', e.target.value)}
            placeholder={t('common.fields.contactNamePlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
      )}

      {/* Email */}
      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
          {labels.email || t('common.fields.email')}
          {required.email && ' *'}
        </label>
        <input
          type="email"
          value={data.email || ''}
          onChange={(e) => onFieldChange('email', e.target.value)}
          placeholder={t('common.fields.emailPlaceholder')}
          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
        />
      </div>

      {/* Phone */}
      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
          {labels.phone || t('common.fields.phone')}
          {required.phone && ' *'}
        </label>
        <input
          type="tel"
          value={data.phone || ''}
          onChange={(e) => onFieldChange('phone', e.target.value)}
          placeholder={t('common.fields.phonePlaceholder')}
          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
        />
      </div>
    </div>
  );
};
