1import { cn } from "@/utils/cn";
2import React from "react";
3import { TextAreaVaraints } from "@lib/types/type";
4// const variants: TextAreaVaraints[] = ["info", "success", "warning", "error", "disabled", ""];
5type TextAreaProps = {
6  placeholder?: string;
7  className?: string;
8  value?: string;
9  variant?: TextAreaVaraints;
10} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
11
12export const TextArea = ({
13  placeholder = "Enter your text here...",
14  className,
15  value,
16  variant = "",
17  ...props
18}: TextAreaProps) => {
19  return (
20    <textarea
21      placeholder={placeholder}
22      value={value}
23      disabled={variant === "disabled"}
24      className={cn(
25        "min-h-24 min-w-72 resize rounded-lg bg-transparent px-3 py-2 font-geist text-xs font-normal text-zinc-100 outline outline-1 outline-gray-100/10 selection:bg-gray-400/40 placeholder:text-zinc-400 focus:outline focus:outline-gray-100/80",
26        className,
27        switchTextVariant(variant),
28      )}
29      {...props}
30    ></textarea>
31  );
32};
33
34const switchTextVariant = (variant: TextAreaVaraints) => {
35  switch (variant) {
36    case "info":
37      return "border border-sky-300 focus:outline focus:outline-sky-500 focus:outline-offset-4";
38    case "success":
39      return "border border-teal-300 focus:outline focus:outline-teal-500 focus:outline-offset-4";
40    case "warning":
41      return "border border-amber-300 focus:outline focus:outline-amber-500 focus:outline-offset-4";
42    case "error":
43      return "border border-red-300 focus:outline focus:outline-red-500 focus:outline-offset-4";
44    case "disabled":
45      return "bg-white border text-gray-800 opacity-50 cursor-not-allowed";
46    default:
47      return "";
48  }
49};
50