import React from "react";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

export function Input({ label, className = "", ...props }: InputProps) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <label className="font-sans text-[13px] text-[var(--p-text)]">
          {label}
        </label>
      )}
      <input
        className="px-3 py-2 bg-[var(--p-surface)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] placeholder:text-[var(--p-muted)] font-sans focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full"
        {...props}
      />
    </div>
  );
}

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
}

export function Textarea({ label, className = "", ...props }: TextareaProps) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <label className="font-sans text-[13px] text-[var(--p-text)]">
          {label}
        </label>
      )}
      <textarea
        className="px-3 py-2 bg-[var(--p-surface)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] placeholder:text-[var(--p-muted)] font-mono focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full"
        {...props}
      />
    </div>
  );
}
