import * as React from "react";
import IconVideo from "../iconVideo";
import * as styles from "./styles.css";

export interface IResultItem {
  title: string;
  url: string;
  isVideo?: boolean;
  subHead: string;
  opType?: string;
  image?: string;
}

export const AutocompleteResultsListItem = ({
  title,
  url,
  isVideo = false,
  subHead,
  opType,
  image,
}: IResultItem) => (
  <li className={styles.item}>
    <a className={styles.link} href={url}>
      {image &&
        <img
          className={styles.image}
          src={`${image}&fit=crop&h=60&w=80`}
          alt={title}
        />
      }

      <div>
        <h3 className={styles.heading}>
          {title}
        </h3>

        <p className={styles.description}>
          {isVideo && <IconVideo />}
          {subHead}
        </p>
      </div>
    </a>
  </li>
);