/**
 * 统一的 Textarea 组件
 */
import React from "react";

export type TextareaSize = "sm" | "md" | "lg";

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  size?: TextareaSize;
  error?: string;
}

const sizeStyles: Record<TextareaSize, string> = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-3 py-2 text-sm",
  lg: "px-4 py-3 text-base",
};

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ size = "md", error, className = "", ...props }, ref) => {
    const baseStyles = "w-full bg-white border text-slate-900 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-slate-400 resize-y";
    const errorStyles = error ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-slate-300";

    const combinedClassName = `
      ${baseStyles}
      ${sizeStyles[size]}
      ${errorStyles}
      ${className}
    `.trim();

    return (
      <div>
        <textarea ref={ref} className={combinedClassName} {...props} />
        {error && (
          <p className="mt-1 text-xs text-red-400">{error}</p>
        )}
      </div>
    );
  }
);

Textarea.displayName = "Textarea";
