"use client";

import type { TextareaHTMLAttributes } from "react";
import { cn } from "@/lib/cn";

type FloatTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
  label: string;
  error?: string;
};

/* Floating-label textarea in the FloatInput family. CSS-only via peer. */
export default function FloatTextarea({
  label,
  error,
  required,
  id,
  className,
  rows = 4,
  ...props
}: FloatTextareaProps) {
  return (
    <div className={cn("min-w-0", className)}>
      <div className="relative">
        <textarea
          id={id}
          required={required}
          rows={rows}
          placeholder=" "
          {...props}
          className={cn(
            "peer block w-full rounded-xl border bg-white px-3.5 pb-2.5 pt-6 text-sm font-normal text-ink placeholder-transparent focus:outline-none focus-visible:outline-none",
            error
              ? "border-red-400 focus:border-red-500"
              : "border-[#d5dce8] focus:border-brand"
          )}
        />
        <label
          htmlFor={id}
          className={cn(
            "pointer-events-none absolute left-3 top-3.5 bg-white px-1 text-[15px] transition-all",
            "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:font-semibold",
            "peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:-translate-y-1/2 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:font-semibold",
            error
              ? "text-red-500"
              : "text-muted peer-focus:text-brand peer-[:not(:placeholder-shown)]:text-brand"
          )}
        >
          {label}
          {required && (
            <span aria-hidden="true" className="ml-0.5 text-red-500">*</span>
          )}
        </label>
      </div>
      {error && (
        <span className="mt-1 block text-xs font-normal text-red-600">
          {error}
        </span>
      )}
    </div>
  );
}