import clsx from "clsx";

export default function Textarea({
    label,
    error,
    hint,
    required = false,
    rows = 5,
    resize = "vertical",
    className = "",
    containerClassName = "",
    ...props
}) {
    return (
        <div className={clsx("w-full", containerClassName)}>
            {label && (
                <label className="mb-2 block text-sm font-medium text-slate-200">
                    {label}

                    {required && (
                        <span className="ml-1 text-red-500">*</span>
                    )}
                </label>
            )}

            <textarea
                rows={rows}
                className={clsx(
                    "w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3",
                    "text-sm text-white placeholder:text-slate-500",
                    "transition-all duration-200",
                    "focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 focus:outline-none",
                    error &&
                        "border-red-500 focus:border-red-500 focus:ring-red-500/20",
                    resize === "none" && "resize-none",
                    resize === "vertical" && "resize-y",
                    resize === "horizontal" && "resize-x",
                    resize === "both" && "resize",
                    className
                )}
                {...props}
            />

            {error ? (
                <p className="mt-2 text-xs text-red-400">
                    {error}
                </p>
            ) : (
                hint && (
                    <p className="mt-2 text-xs text-slate-500">
                        {hint}
                    </p>
                )
            )}
        </div>
    );
}