import { useFormContext, Controller } from 'react-hook-form';
import { Label } from '@/components/ui/label';

interface IProps {
	name: string;
	label: string;
	isRequired?: boolean;
	rows?: number;
}

export default function RHFTextArea({
	name,
	isRequired = true,
	label,
	rows = 3,
	...other
}: IProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
	const { control } = useFormContext();

	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => {
				return (
					<div className="space-y-1">
						<Label className="text-xs font-medium mb-1 block ">
							{label}
							{isRequired ? (
								<span className="text-red-500 align-middle">
									{' *'}
								</span>
							) : (
								<span className="text-[#929292] font-normal text-[10px]">{`(optional)`}</span>
							)}
						</Label>
						<textarea
							id={name}
							{...field}
							rows={rows}
							className={`
  w-full
  bg-[#1A1612]
  border ${error ? 'border-red-500' : 'border-[#3A332C]'}
  rounded-lg
  px-3
  py-2
  text-[#EDEBE6] text-sm
  placeholder:text-[#B8B2A8] placeholder:text-sm
  shadow-[0_2px_8px_rgba(0,0,0,0.4)]
  transition-all duration-300
  hover:border-[#B89E55]
  focus:border-[#CBB26A]
  focus:ring-2 focus:ring-[#CBB26A]/20
  focus:shadow-[0_0_0_1px_#CBB26A]
  focus:outline-none
  disabled:bg-[#14110E]
  disabled:text-[#B8B2A8]
  disabled:border-[#2A2520]
`}
							{...other}
							exportparts="textarea"
						/>
						{error && (
							<p className="text-red-500 text-xs">{error.message}</p>
						)}
					</div>
				);
			}}
		/>
	);
}