import React from 'react';
import s from './ItemHint.module.scss';
export const ItemHint = ({ ...parameters }: any) => {
  let highlights = parameters.item.metadata.highlights.split('|?|');
  let difficulty = parameters.item.metadata.difficulty.split('|?|');
  let linkToProductPage = parameters.item.metadata.linkToProductPage;
  return (
    <div
      className={`${s.hidden_content} ${
        parameters.hintPosition === 'top' ? s.top : s.bottom
      } ${s.active}`}
    >
      <div className={s.content}>
        <h1>Highlights:</h1>
        <ul>
          {highlights &&
            highlights.map((item: string, index: number) => (
              <li key={`${item}-${index}`}>{item}</li>
            ))}
        </ul>
        {difficulty && <h1>Installation Difficulty: {difficulty[0]}</h1>}
        {difficulty && <h1>{difficulty[1]}</h1>}
        <span></span>
      </div>
      {linkToProductPage && <a href={linkToProductPage}>View Product Page</a>}
    </div>
  );
};