import React, {useEffect, useState} from 'react';
import {askRepository} from "../../repository/ask";
import {Image} from "antd";
import constraint from "../Constraint";

const Ask = () => {
    // const {data: contacts} = askRepository.api.getContacts();
    const [contacts, setContacts] = useState();

    useEffect(() => {
        fetchData()
    }, [])

    const fetchData = async () => {
        try {
            const res = await askRepository.api.getContacts()
            setContacts(res)
        } catch (err) {
            console.log(err)
        }
    }

    const dataContact = [
        {
            title: "Telepon Customer Care",
            no: contacts?.results?.phone,
            timetable: contacts?.results?.phone_wording,
            icon: "/assets/icons/phone.svg",
            link: `tel:${contacts?.results?.phone}`
        },
        {
            title: "Whatsapp Customer Care",
            no: contacts?.results?.whatsapp,
            timetable: contacts?.results?.whatsapp_wording,
            icon: "/assets/icons/whatsapp.svg",
            link: `https://wa.me/${contacts?.results?.whatsapp}`
        },
        {
            title: "Email Customer Care",
            no: contacts?.results?.email,
            timetable: contacts?.results?.email_wording,
            icon: "/assets/icons/email.svg",
            link: `mailto:${contacts?.results?.email}`
        }
    ]

    return (
        <div className={'relative pb-10 mt-5 w-full'}>
            <div className={'text-center'}>
                <h3 className={'text-lg font-bold z-10 pt-16'}>Tanyakan ke <span className={'text-[#FFB500]'}>Kami</span></h3>
                <p className={'z-10 px-5'}>Customer Care kami siap membantu Anda jika Anda memiliki pertanyaan atau masalah dalam menggunakan
                    aplikasi ini.</p>
            </div>
            <div className={'absolute top-3 left-0 z-0'}>
                <Image src={'/assets/backgrounds/cloud-left.svg'} alt={'cloud-left'} preview={false} />
            </div>
            <div className={'absolute top-1 right-0 z-0'}>
                <Image src={'/assets/backgrounds/cloud-right.svg'} alt={'cloud-right'} preview={false} />
            </div>

            <div className={'flex flex-col gap-4 m-5'}>
                {dataContact.map((it, index) => (
                    <a key={index} href={it.link} target={'_blank'} className={'flex flex-row justify-between gap-4 bg-white p-5 shadow-lg rounded-lg text-black z-10 hover:cursor-pointer hover:shadow-xl'} rel="noreferrer">
                        <div className={'flex flex-col'}>
                            <span>{it.title}</span>
                            <span className={'font-bold'}>{it.no}</span>
                            <span className={'text-xs text-[#9B9B9B]'}>{it.timetable}</span>
                        </div>
                        <Image src={it.icon} alt={'icon'} width={40} height={40} preview={false} />
                    </a>
                ))}
            </div>
        </div>
    )
}

export default Ask;