import Link from 'next/link';
import { Link as HeroUILink } from '@heroui/react';
import Button from '@/components/base/Button';
import Icon from '@/components/base/Icon';
import Map from './Map';
import cn from '@/lib/merge-clsx';

const AddressMap: React.FC<IAddressMap> = ({
  title,
  phone,
  email,
  address,
  mapData,
  button,
  directionButton
}) => {
  return (
    <section
      className={cn(
        'bg-primary-900 lg:p-24 p-3',
        '[&:not(:first-child)]:-mt-6',
        '[&:not(:last-child)]:-mb-6'
      )}>
      <div
        className={cn(
          'grid lg:grid-cols-12 lg:grid-rows-1 grid-cols-1 grid-rows-3 p-1 max-w-[1920px] mx-auto bg-background rounded-lg'
        )}>
        <div className="lg:col-span-4 row-span-1 lg:p-4 xl:p-12 p-6 flex flex-col items-center  ">
          <div className="grid gap-4 w-full">
            <h2 className="font-serif text-3xl lg:text-4xl ">{title}</h2>

            <div className="grid grid-cols-[2.25rem_1fr] items-start">
              <Icon
                name="location-pin"
                className="text-[1.5rem] relative top-1"
              />
              <div>
                <div dangerouslySetInnerHTML={{ __html: address }} />
                {directionButton?.url && (
                  <div className="my-2">
                    <Button
                      as={HeroUILink}
                      href={directionButton?.url}
                      target="_blank"
                      color="primary"
                      size="sm"
                      className="text-sm"
                      rel="noopener noreferrer">
                      <Icon name="location-pin" />
                      {directionButton?.label}
                    </Button>
                  </div>
                )}
              </div>
            </div>

            <div className="grid grid-cols-[2.25rem_1fr] items-center">
              <Icon name="phone-light" className="text-[1.25rem]" />
              <a href={`tel:${phone}`} className="hover:underline">
                {phone}
              </a>
            </div>

            <div className="grid grid-cols-[2.25rem_1fr] items-center">
              <Icon name="email-light" />
              <a href={`mailto:${email}`} className="hover:underline">
                {email}
              </a>
            </div>

            {button && (
              <div>
                <Button
                  as={Link}
                  href={button.url}
                  color="primary"
                  size="lg"
                  className="text-sm">
                  {button.label}
                </Button>
              </div>
            )}
          </div>
        </div>

        <div className="lg:col-span-8 row-span-2">
          <div className="rounded-lg overflow-hidden h-full">
            <Map {...mapData} />
          </div>
        </div>
      </div>
    </section>
  );
};

export default AddressMap;
