import React, { useState } from 'react';
import s from './JeepItem.module.scss';

export const JeepItem = ({ ...props }) => {
  const { img, title, description, readMore, link } = props;
  const [openDesc, setOpenDesc] = useState(false);

  function kitcut(text: string, limit: number) {
    text = text.trim();
    if (text.length <= limit) return text;
    text = text.slice(0, limit); // тупо отрезать по лимиту
    let lastSpace = text.lastIndexOf(' ');
    if (lastSpace > 0) {
      // нашлась граница слов, ещё укорачиваем
      text = text.substr(0, lastSpace);
    }
    return text + '...';
  }

  return (
    <div className={s.wrapper}>
      <div className={s.img}>
        <img src={img} alt="" />
      </div>
      <div className={s.title}>{title}</div>
      <div className={s.description}>
        {openDesc ? description : kitcut(description, 145)}
        <span className={s.readMore} onClick={() => setOpenDesc(!openDesc)}>
          {openDesc ? 'Read Less' : 'Read More'}
        </span>
      </div>
      <div onClick={() => link()} className={s.button}>
        Customize appearance
      </div>
    </div>
  );
};