"use client";

import React, { TextareaHTMLAttributes } from "react";
import { PRIMARY_COLOR } from "@/lib/common";

interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;            // Optional label
  error?: string;            // Optional validation message
  containerClass?: string;   // Optional container styling
  textareaClass?: string;    // Optional textarea styling
}

export const TextArea: React.FC<TextAreaProps> = ({
  label,
  error,
  containerClass = "",
  textareaClass = "",
  ...props
}) => {
  const baseClasses =
    "w-full rounded-lg border bg-white px-3 py-2 text-sm leading-5 shadow-sm transition-all duration-150 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-opacity-100 hover:border-opacity-50 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed min-h-[7.5rem]";
  const borderClasses = error
    ? "border-red-400 focus:border-red-500 focus:ring-red-400/40"
    : "border-gray-200";
  return (
    <div className={`flex flex-col ${containerClass}`}>
      {label && <label className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-600">{label}</label>}
      <textarea
        {...props}
        autoComplete="off"
        className={`${baseClasses} ${borderClasses} resize-none ${textareaClass}`}
        style={!error ? {
          // @ts-ignore - dynamic style
          "--focus-border": PRIMARY_COLOR,
          "--focus-ring": `${PRIMARY_COLOR}66`,
          "--hover-border": `${PRIMARY_COLOR}80`,
        } : {}}
        onFocus={(e) => {
          if (!error) {
            e.currentTarget.style.borderColor = PRIMARY_COLOR;
            e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}66`;
          }
        }}
        onBlur={(e) => {
          if (!error) {
            e.currentTarget.style.borderColor = "";
            e.currentTarget.style.boxShadow = "";
          }
        }}
        onMouseEnter={(e) => {
          if (!error && document.activeElement !== e.currentTarget) {
            e.currentTarget.style.borderColor = `${PRIMARY_COLOR}80`;
          }
        }}
        onMouseLeave={(e) => {
          if (!error && document.activeElement !== e.currentTarget) {
            e.currentTarget.style.borderColor = "";
          }
        }}
      />
      {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
    </div>
  );
};