"use client";

import FormModal from "@/components/FormModal"
import Image from "next/image"
//import { membershipData } from "lib/data";

const SinglePrayerRequestPage = () => {
  return (
    <div className='flex-1 p-4 flex flex-col gap-4 xl:flex-row w-full'>
        <div className="w-full">
            {/*TOP*/}
            <div className="flex flex-col lg:flex-row gap-4 w-full ">
            {/*USER INFO CARD*/}
            <div className="bg-slate-400 py-6 px-4 rounded-md flex gap-4 w-full h-48 mt-4">
                <div className="w-1/3">
                <Image src= '/prayerRequest.png' alt="" width={100} height={100} className="w-36 h-36 rounded-full object-cover" />
                </div>
                <div className="w-2/3 flex flex-col justify-between gap-2">
                <div className="flex items-center gap-4">
                    <h1 className="text-xl font-semibold">Emmy Kim</h1>
                    <FormModal table="PrayerRequest" type="update"/>
                </div>
                <div className="flex items-center justify-between gap-2 flex-wrap text-xs font-medium">
                    <div className="w-full md:w-1/3 flex items-center gap-2">
                        <Image src='/role.png' alt="" width={18} height={18}/>
                        <span text-lg font-medium text-gray-700 mt-0>Prayer Request</span>  
                    </div>
                </div>   
                </div>
            </div>
            </div>
         {/*PRAYER DETAILS */}
         <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
          {/*SUBJECT */}  
            <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
            <h2 className="text-lg font-semibold mb-4">Description</h2>
            <div className="bg-white p-6 rounded-lg shadow w-full">
            <p className="text-gray-700 text-base">
            Prayer request to help get school fees.
            </p>
            </div>  
         </div>
         </div>
         {/*MEMBERSHIP INFORMATION */}
         <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
            <h2 className="text-lg font-semibold mb-4">Request Details</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {/* member ID */}
                <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
                    <Image src='/number.png' alt="" width={18} height={18}/>
                    <span className="font-medium">Member ID</span>
                </div>
                {/* Request Status */}
                <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
                    <Image src='/status.png' alt="" width={18} height={18}/>
                    <span className="font-medium">Received</span>

                </div>
                {/* Response */}
                <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
                    <Image src='/status.png' alt="" width={18} height={18}/>
                    <span className="font-medium">Responded</span>
                </div>
            </div>
         </div>
         {/*Notes */} 
         <div className="bg-white p-4 rounded-lg shadow flex flex-col gap-2 col-span-full mt-4">
            <h3 className="text-md font-semibold">Notes</h3>
            <textarea name="w-full p-2 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-400"
             rows={4}
             placeholder="Leave a note about this request..."
             ></textarea>
         </div>
        </div>
    </div>
  )
}

export default SinglePrayerRequestPage