import * as React from 'react';
import { Link } from 'react-router-dom';
import { changeQuery } from '../../AC';
import { IWebinar } from '../../interfaces';
import store from '../../store';
import './SearchItem.css';

interface ISearchItemProps {
  webinar: IWebinar;
  key?: string;
}

export default (props: ISearchItemProps): JSX.Element => {
  const { webinar } = props;
  const { description, date, authorName , _id } = webinar;

  function 
(): void {
    store.dispatch(changeQuery(''));
  }

  return(
    <div className='search__item'>
      <figure className='search__img'>
        <img className='search__aspect-fill' src='/triangle.jpg' />
      </figure>
      <div className='search__text'>
        <Link onClick={onClearQuery} className='search__link' to={`/webinars/${_id}`}>
          <div className='search__description'>{description}</div>
          <div className='search__time'>{date}</div>
          {authorName}
        </Link>
      </div>
    </div>
  );
};

onClearQuery