// app/dashboard/users/[userId]/components/MessageInput.tsx

import React from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight, Loader2 } from "lucide-react";

interface MessageInputProps {
  newMessage: string;
  setNewMessage: (message: string) => void;
  handleSendMessage: () => void;
  isSending: boolean;
  isDisabled: boolean;
  placeholderText: string;
}

export function MessageInput({
  newMessage,
  setNewMessage,
  handleSendMessage,
  isSending,
  isDisabled,
  placeholderText
}: MessageInputProps) {
  return (
    <div className="mt-4 border rounded-lg p-3">
      <div className="flex flex-col gap-3">
        <textarea
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder={placeholderText}
          className="w-full p-3 rounded-lg border resize-y min-h-[100px] bg-background"
          disabled={isDisabled}
        />
        <div className="flex">
          <Button
            onClick={handleSendMessage}
            disabled={!newMessage.trim() || isSending || isDisabled}
            variant={!isDisabled ? "default" : "outline"}
          >
            {isSending ? (
              <>
                <Loader2 className="h-4 w-4 ml-2 animate-spin" />
                در حال ارسال...
              </>
            ) : (
              <>
                <ArrowRight className="h-4 w-4 ml-2" />
                ارسال پیام
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}