import styles from './ViewForm.module.css';
import { EditFieldConfig } from './EditForm';

// ViewForm props - for display-only purposes
export interface ViewFormProps<T = any> {
  data: T;
  fields: EditFieldConfig[];
  className?: string;
}

// ViewForm component - displays data in read-only format
export function ViewForm<T extends Record<string, any>>({
  data,
  fields,
  className = ''
}: ViewFormProps<T>) {

  // Render field in view-only mode
  const renderField = (field: EditFieldConfig) => {
    const value = data[field.key];

    return (
      <div className={styles.fieldGroup} key={field.key}>
        <label className={styles.fieldLabel}>{field.label}</label>
        <div className={styles.fieldValue}>
          {field.formatter ? field.formatter(value) : (value || 'N/A')}
        </div>
      </div>
    );
  };

  return (
    <div className={`${styles.viewForm} ${className}`}>
      {fields.map(field => renderField(field))}
    </div>
  );
}

export default ViewForm;