import React from 'react';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Text } from './Text';

import { LucideIcon } from 'lucide-react';

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

export function FormField({ 
  label, 
  icon, 
  children,
  required = false,
  error,
  hint,
}: FormFieldProps) {
  return (
    <Stack gap={2}>
      <label className="block text-sm font-medium text-gray-300">
        <Stack direction="row" align="center" gap={2}>
          {icon && <Icon icon={icon} size={4} color="#6b7280" />}
          <Text size="sm" weight="medium" color="text-gray-300">{label}</Text>
          {required && <Text color="text-error-red">*</Text>}
        </Stack>
      </label>
      {children}
      {error && (
        <Text size="xs" color="text-error-red" block mt={1}>{error}</Text>
      )}
      {hint && !error && (
        <Text size="xs" color="text-gray-500" block mt={1}>{hint}</Text>
      )}
    </Stack>
  );
}