import { type FC } from 'react'
import DefaulModal from './DefaulModal'
import { type ContactUsItem } from '../pages/contactUs/types'

interface Props {
    open: boolean
    close: () => void
    contactUs: ContactUsItem | null
}

const ContactUsMessageModal: FC<Props> = ({ open, close, contactUs }) => {
    if (!contactUs) return null

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header="مشاهده پیام کامل"
            width={600}
        >
            <div className="p-4">
                <div className="space-y-4">
                    <div className="flex flex-col space-y-2">
                        <label className="text-sm font-medium text-gray-700">
                            نام کامل
                        </label>
                        <div className="p-3 bg-gray-50 rounded-lg text-sm text-gray-900">
                            {contactUs.fullName}
                        </div>
                    </div>

                    <div className="flex flex-col space-y-2">
                        <label className="text-sm font-medium text-gray-700">
                            ایمیل / تلفن
                        </label>
                        <div className="p-3 bg-gray-50 text-sm rounded-lg text-gray-900">
                            {contactUs.email_phone}
                        </div>
                    </div>

                    <div className="flex flex-col space-y-2">
                        <label className="text-sm font-medium text-gray-700">
                            پیام
                        </label>
                        <div className="p-3 text-sm bg-gray-50 rounded-lg text-gray-900 whitespace-pre-wrap break-words">
                            {contactUs.message}
                        </div>
                    </div>
                </div>
            </div>
        </DefaulModal>
    )
}

export default ContactUsMessageModal
