import classNames from 'classnames';
import Image from 'next/image';
import React, { useState } from 'react';
import contactimage from '@/../public/images/agents/contact.webp';
interface ContactProps {
  title?: string;
  preTitle?: string;

  cities: any[];
  trans: any;
}

const Contact: React.FC<ContactProps> = (props) => {
  const {
    trans,
    title = '',
    preTitle = '',

    cities
  } = props;

  const [collapsedActive, setCollapsedActive] = useState(0);

  return (
    <section className="wrapper tw-bg-cover tw-bg-no-repeat tw-bg-main-light mb-7">
      <div className="container py-5 py-md-10">
        <div className="row gx-lg-8 tw-gap-y-4 md:tw-gap-y-8">
          {/*-- /column -*/}
          <div className="col-12 col-md-4 offset-md-1">
            <Image src={contactimage} alt="contact cities" className="tw-w-full  tw-h-auto" />
          </div>
          <div className="col-12 col-md-5">
            <p className="mb-2 base-pretitle ">{preTitle}</p>
            <h2 className="base-title  !tw-text-main-color">{title}</h2>
            <div className="accordion accordion-wrapper tw-pt-7" id="accordionContact">
              {cities?.map((city, key) => (
                <div key={key} className="card accordion-item mb-0 tw-bg-transparent">
                  <div className="tw-py-1" id={'heading' + key}>
                    <button
                      className="accordion-button tw-flex tw-gap-4 tw-w-full hover:tw-opacity-75"
                      data-bs-toggle="collapse"
                      data-bs-target={'#collapse' + key}
                      aria-expanded="false"
                      aria-controls={'collapse' + key}
                      onClick={() => setCollapsedActive(collapsedActive === key + 1 ? 0 : key + 1)}
                    >
                      {' '}
                      <p className="base-text">
                        {' '}
                        {collapsedActive === key + 1 ? (
                          <i className="uil uil-angle-down"></i>
                        ) : (
                          <i className="uil uil-angle-up"></i>
                        )}
                      </p>
                      <p className="base-text !tw-font-bold">{city?.name}</p>
                    </button>
                  </div>
                  <div
                    id={'collapse' + key}
                    className={classNames('accordion-collapse collapse')}
                    aria-labelledby={'heading' + key}
                    data-bs-parent="#accordionContact"
                  >
                    <div className="tw-py-4">
                      <p className="base-text">{city?.address}</p>
                      <p className="base-text">{city?.contactEmail}</p> <p className="base-text">{city?.phoneNumber}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}
    </section>
  );
};

export default Contact;