'use client';

import React from 'react';
import { Info } from 'lucide-react';

interface Props {
  label?: string;
  required?: boolean;
  hint?: string;
  children: React.ReactNode;
  error?: string;
}

export function FieldGroup({ label, required, hint, children, error }: Props) {
  return (
    <div className="space-y-1.5">
      {label && (
        <label className="flex items-center gap-1 text-sm font-medium text-foreground">
          {label}
          {required && <span className="text-red-500">*</span>}
          {hint && (
            <span className="ml-1 text-muted-foreground" title={hint}>
              <Info className="w-3.5 h-3.5 inline" />
            </span>
          )}
        </label>
      )}
      {children}
      {error && <p className="text-xs text-red-500">{error}</p>}
    </div>
  );
}