'use client';

import Image from 'next/image';
import { useState } from 'react';

interface MessageInputProps {
  onSend?: (message: string) => void;
}

export function MessageInput({ onSend }: MessageInputProps) {
  const [message, setMessage] = useState('');

  const handleSend = () => {
    if (message.trim() && onSend) {
      onSend(message.trim());
      setMessage('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="border border-[#00293d]/10 rounded-[20px] bg-white p-4">
      {/* Text input area */}
      <div className="border border-[#00293d]/10 rounded-[20px] p-4 mb-3">
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Write a Message........"
          className="w-full min-h-[120px] resize-none font-serif font-normal text-[14px] leading-[19px] text-[#00293D] placeholder-[#00293D]/50 focus:outline-none"
        />
      </div>

      {/* Action bar */}
      <div className="flex items-center justify-between">
        {/* Attachment buttons */}
        <div className="flex items-center gap-3">
          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/gallery-icon.svg"
              alt="Add image"
              width={24}
              height={24}
            />
          </button>
          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/chain-icon.svg"
              alt="Add link"
              width={24}
              height={24}
            />
          </button>
          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/gif-icon.svg"
              alt="Add GIF"
              width={24}
              height={24}
            />
          </button>
          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/emoji-icon.svg"
              alt="Add emoji"
              width={24}
              height={24}
            />
          </button>
        </div>

        {/* Send button and more options */}
        <div className="flex items-center gap-2">
          <button
            onClick={handleSend}
            className="px-4 py-1.5 bg-[#e58625] text-[#00293d] font-serif font-normal text-[14px] leading-[19px] rounded-[15px] hover:bg-[#d47720] transition-colors cursor-pointer"
          >
            Send
          </button>
          <button className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/three-dots-icon.svg"
              alt="More options"
              width={24}
              height={24}
            />
          </button>
        </div>
      </div>
    </div>
  );
}