import React, { useState } from 'react';
import Image from 'next/image';

import aryve from '@/../public/images/aboutUS/Logo-aryve.webp';
import av from '@/../public/images/aboutUS/Logo-AVMaquinaria.webp';
import velhmat from '@/../public/images/aboutUS/Logo-Velhmat.webp';
import classNames from 'classnames';
import Link from 'next/link';

interface BrandsProps {
  trans: any;
}

const Brands: React.FC<BrandsProps> = ({ trans }) => {
  const items = [
    {
      image: aryve,
      text: trans('aboutUs:brands.item1'),
      href: 'https://www.aryve.com.mx/'
    },
    {
      image: av,
      text: trans('aboutUs:brands.item2'),
      href: '#'
    },
    {
      image: velhmat,
      text: trans('aboutUs:brands.item3'),
      href: 'https://www.facebook.com/velhmat '
    }
  ];
  return (
    <div className={classNames('wrapper tw-border-4  tw-border-main-light tw-bg-main-white')}>
      <div className="container">
        <div className="row  py-7 py-md-14">
          <div className="col-12 col-lg-10 offset-lg-1 mb-7 mb-md-14">
            <p className="base-pretitle text-center text-md-start">{trans('aboutUs:brands.preTitle')}</p>
            <p className="base-title my-1 text-center text-md-start !tw-text-main-color">
              {trans('aboutUs:brands.title')}
            </p>
            <p className="base-text text-center text-md-start ">{trans('aboutUs:brands.text')}</p>
          </div>
          <div className="col-12 col-lg-10 offset-lg-1 ">
            <div className="tw-grid md:tw-grid-cols-3 gap-7 text-center">
              {items?.map((item, key) => (
                <div className="tw-h-full tw-flex tw-flex-col" key={key}>
                  <div className="tw-h-max">
                    <Image src={item.image} alt="" className="tw-h-[48px] tw-w-auto tw-mx-auto" />
                  </div>

                  <p className="base-text py-7">{item.text}</p>

                  <Link
                    target="_blank"
                    href={item?.href}
                    className="tw-mt-auto tw-mx-auto tw-w-max tw-block tw-font-inter tw-text-xs tw-font-semibold tw-text-main-color tw-uppercase tw-border tw-border-main-color px-6 py-3 tw-rounded-md hover:tw-bg-main-color hover:tw-text-white"
                  >
                    {trans('common:knowMore')}
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Brands;