import React from 'react';

import Card from '../../../components/Card.js';

const CategoryCard = props => {
  const { category } = props;

  const categoryRules = category.rules.map(rule => {
    let favicon = null;

    if (rule.favicon) {
      favicon = <img className="favicon" src={rule.favicon} />;
    } else {
      favicon = <i className="fas fa-image" />;
    }

    return (
      <li key={rule.pk} className="list__item">
        {favicon}
        {rule.name}
      </li>
    );
  });

  const cardHeader = (
    <>
      <h2 className="h2">{category.name}</h2>
      <small className="small">{category.created}</small>
    </>
  );
  const cardContent = <>{category.rules && <ul className="list">{categoryRules}</ul>}</>;
  const cardFooter = (
    <>
      <a
        className="link button button--primary"
        href={`${props.updateUrl}/${category.pk}/`}
      >
        Edit
      </a>
      <button
        id="category-delete"
        className="button button--error"
        onClick={() => props.showDialog(category.pk)}
        data-id={`${category.pk}`}
      >
        Delete
      </button>
    </>
  );

  return <Card header={cardHeader} content={cardContent} footer={cardFooter} />;
};

export default CategoryCard;
