import { Mic } from "lucide-react";

export default function DirectMessage() {
    return (
        <div className="mt-8 mx-4 border-2 border-dashed border-gray-400 rounded-lg p-4 relative">
            {/* Direct Message label positioned at top right */}
            <div className="absolute -top-3 right-4 bg-white px-2">
                <h3 className="text-sm font-medium text-gray-700">Direct Message</h3>
            </div>
            
            <div className="flex flex-col">
                {/* Text area with "Chat with Samiya now!" as placeholder */}
                <div className="mb-1 w-full">
                    <textarea 
                        className="w-full border-0 rounded-lg p-3 text-sm focus:outline-none focus:ring-0 resize-none bg-transparent"
                        placeholder="Chat with Samiya now!"
                        rows={3}
                    ></textarea>
                </div>
                
                {/* Voice message button */}
                <button className="flex items-center justify-center gap-2 bg-primary-light bg-opacity-20 text-primary rounded-full py-3 px-4 mx-auto max-w-full border border-primary-light">
                    <div className="bg-black p-2 rounded-full">
                        <Mic size={16} className="text-white" />
                    </div>
                    <div className="flex flex-col items-start">
                        <span className="text-sm font-bold">Send Voice Message</span>
                        <span className="text-xs ">Helps get to know you better</span>
                    </div>
                </button>
            </div>
        </div>
    )
}