import React from "react";

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

export function FormField({ label, error, children, required }: FormFieldProps) {
  return (
    <div style={s.field}>
      <label style={s.label}>
        {label}{required && <span style={s.req}> *</span>}
      </label>
      {children}
      {error && <span style={s.error}>{error}</span>}
    </div>
  );
}

export const inputStyle: React.CSSProperties = {
  width: "100%",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius)",
  padding: "8px 10px",
  fontSize: 14,
  outline: "none",
  boxSizing: "border-box",
};

export function Btn({
  children,
  variant = "primary",
  type = "button",
  disabled,
  onClick,
  style,
}: {
  children: React.ReactNode;
  variant?: "primary" | "danger" | "ghost";
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  onClick?: () => void;
  style?: React.CSSProperties;
}) {
  const base: React.CSSProperties = {
    border: "none",
    borderRadius: "var(--radius)",
    padding: "8px 16px",
    fontWeight: 600,
    fontSize: 13,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.6 : 1,
  };
  const variants = {
    primary: { background: "var(--color-primary)", color: "#fff" },
    danger: { background: "var(--color-danger)", color: "#fff" },
    ghost: {
      background: "none",
      color: "var(--color-text-muted)",
      border: "1px solid var(--color-border)",
    },
  };
  return (
    <button type={type} style={{ ...base, ...variants[variant], ...style }} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

const s: Record<string, React.CSSProperties> = {
  field: { display: "flex", flexDirection: "column", gap: 4, marginBottom: 16 },
  label: { fontWeight: 500, fontSize: 13 },
  req: { color: "var(--color-danger)" },
  error: { color: "var(--color-danger)", fontSize: 12 },
};