"use client";

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

const SingleInquiryPage = () => {
  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= '/generalEnquiry.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="Inquiries" 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>Inquiry</span>  
                    </div>
                </div>
                </div>
            </div>
            </div>
         {/*ENQUIRY INFORMATION */}
         <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
            <h2 className="text-lg font-semibold mb-4">Subject</h2>
            <div className="bg-white p-6 rounded-lg shadow w-full">
            <p className="text-gray-700 text-base">
            When does praise and worship team meet?
            </p>
            </div>  
         </div>
         {/*ENQUIRY DETAILS */}
         <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
            <h2 className="text-lg font-semibold mb-4">Enquiry Details</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {/* MEMBER DETAILS */}
                <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>
                {/* MEMBER EMAIL */}
                <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
                    <Image src='/email.png' alt="" width={18} height={18}/>
                    <span className="font-medium">emmy@gmail.com</span>
                </div>
                {/* MEMBER PHONE NUMBER */}
                <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
                    <Image src='/phone.png' alt="" width={18} height={18}/>
                    <span className="font-medium">0724 000 000</span>
                </div>
                {/* ENQUIRY 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">Read</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 inquiry..."
             ></textarea>
         </div>
        </div>
    </div>
  )
}

export default SingleInquiryPage