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

import mision from '@/../public/images/aboutUS/Mision.svg';
import vision from '@/../public/images/aboutUS/Vision.svg';
import valuesIcon from '@/../public/images/aboutUS/Valores.svg';
import classNames from 'classnames';

interface ValuesProps {
  trans: any;
  version?: string;
}

const Values: React.FC<ValuesProps> = ({ trans, version = 'normal' }) => {
  const items = [
    {
      image: mision,
      title: trans('common:values.0.title'),
      text: trans('common:values.0.text')
    },
    {
      image: vision,
      title: trans('common:values.1.title'),
      text: trans('common:values.1.text')
    },
    {
      image: valuesIcon,
      title: trans('common:values.2.title'),
      text: trans('common:values.2.text')
    }
  ];

  return (
    <div className={classNames('wrapper  tw-bg-main-light')}>
      <div className="container">
        <div className="row  py-7 pb-md-14">
          <div className={classNames('col-12  ', { 'col-lg-10 offset-lg-1': version === 'normal' })}>
            <div className="tw-grid min-[992px]:tw-grid-cols-3 gap-4 text-center">
              {items?.map((item, key) => (
                <div
                  className={classNames({
                    'tw-bg-white tw-p-4 tw-rounded tw-border tw-border-main-color': version === 'card'
                  })}
                  key={key}
                >
                  <div className="svg-bg svg-bg-lg  ">
                    <Image src={item.image} alt="" />
                  </div>
                  <h2 className={classNames('base-text !tw-font-extrabold ')}>{item.title}</h2>
                  <p className={classNames('base-text')}>{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Values;