import * as React from "react";
import { cn } from "@/lib/utils";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "w-full h-25 flex-1 rounded-[8px] bg-white border border-white/20 text-black placeholder:text-black focus:outline-none focus:border-secondary-main px-4 py-3 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  );
}

interface TextareaWithLabelProps extends React.ComponentProps<"textarea"> {
  label: string;
  required?: boolean;
}

function TextareaWithLabel({
  className,
  label,
  required,
  ...props
}: TextareaWithLabelProps) {
  return (
    <div className="relative w-full">
      <textarea
        data-slot="textarea"
        placeholder=" "
        className={cn(
          "peer w-full h-25 flex-1 rounded-[8px] bg-white border border-white/20 text-black focus:outline-none focus:border-secondary-main px-4 py-3 transition-[color,box-shadow] outline disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        required={required}
        {...props}
      />
      <label
        className={cn(
          "absolute start-4 top-3 text-gray-400 text-sm pointer-events-none",
          "peer-placeholder-shown:block peer-not-placeholder-shown:hidden"
        )}
      >
        {label} {required && <span className="text-red-500">*</span>}
      </label>
    </div>
  );
}

export { Textarea, TextareaWithLabel };