import React from 'react';

interface Props {
  label: string;
  htmlFor?: string;
  error?: string;
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}

/**
 * چیدمان یک فیلد فرم: برچسب بالا، کنترل (children)، و پیام خطای زیر آن.
 * presentational — منطق فرم/ولیدیشن بیرون از این کامپوننت است.
 */
export default function Field({ label, htmlFor, error, className, style, children }: Props) {
  return (
    <div className={className} style={{ display: 'flex', flexDirection: 'column', gap: 6, ...style }}>
      <label htmlFor={htmlFor} className="cp-label">{label}</label>
      {children}
      {error && (
        <span style={{ color: 'var(--danger)', fontSize: 12 }}>{error}</span>
      )}
    </div>
  );
}