"use client"

import React from 'react';

import { Label } from '@djangocfg/ui-core/components';
import { cn } from '@djangocfg/ui-core/lib';
import { FieldTemplateProps } from '@rjsf/utils';

/**
 * Field template for JSON Schema Form
 * Controls the layout and styling of individual form fields
 */
export function FieldTemplate(props: FieldTemplateProps) {
  const {
    id,
    classNames,
    style,
    label,
    help,
    required,
    description,
    errors,
    children,
    displayLabel,
    hidden,
    rawErrors,
  } = props;

  if (hidden) {
    return <div className="hidden">{children}</div>;
  }

  const hasError = rawErrors && rawErrors.length > 0;

  return (
    <div
      className={cn('space-y-2', classNames)}
      style={style}
    >
      {displayLabel && label && (
        <Label htmlFor={id} className={cn(hasError && 'text-destructive')}>
          {label}
          {required && <span className="text-destructive ml-1">*</span>}
        </Label>
      )}

      {description && (
        <div className="text-sm text-muted-foreground">{description}</div>
      )}

      <div>{children}</div>

      {errors && (
        <div className="text-sm text-destructive">{errors}</div>
      )}

      {help && (
        <div className="text-sm text-muted-foreground">{help}</div>
      )}
    </div>
  );
}
