import { useDispatch } from "react-redux";
import { AppDispatch } from "../../app/store";
import { setShowPostModal } from "../../app/reducers/feed";
import { Camera, Mic } from "lucide-react";
import PostModal from "./PostModal";


export default function CreatePost(){
    const dispatch = useDispatch<AppDispatch>();
   
    return(
        <>
            <div className="bg-white rounded-lg shadow-md p-6 mb-6 h-[150px] flex flex-col justify-between">
                <div className="flex items-center gap-3">
                <img 
                    src="/src/images/registration/profile.png" 
                    alt="Profile" 
                    className="w-12 h-12 rounded-full"
                />
                <div className="flex-1">
                    <input
                    type="text"
                    placeholder="What do you think about marriage?"
                    className="w-full bg-gray-100 rounded-full py-3 px-4 focus:outline-none cursor-pointer"
                    onClick={() => dispatch(setShowPostModal(true))}
                    readOnly
                    />
                </div>
                </div>
                <hr className="mt-4" />
                <div className="flex justify-center mt-auto pt-4 gap-6">
                <button 
                    className="flex items-center gap-2 text-blue-600 font-medium py-2 px-4 hover:bg-blue-50 rounded-lg transition-colors"
                    onClick={() => dispatch(setShowPostModal(true))}
                >
                    <Camera size={20} />
                    <span>Add Photo</span>
                </button>
                <button 
                    className="flex items-center gap-2 text-red-500 font-medium py-2 px-4 hover:bg-red-50 rounded-lg transition-colors"
                    onClick={() => dispatch(setShowPostModal(true))}
                >
                    <Mic size={20} />
                    <span>Add Voice</span>
                </button>
                </div>
            </div>

            {/* Post creation modal */}
            <PostModal />
        </>
    )
}