import { Category } from '@usercentrics/cmp-browser-sdk';
import * as React from 'react';

import { ContentService } from './ContentService';

export const ContentCategory = ({ category }: { category: Category }): JSX.Element | null => {
  return category ? (
    <div>
      <div className="uc-p-4 uc-mb-4 md:uc-pb-0 uc-bg-primary-lightest md:uc-bg-white">
        <h3 className="uc-font-medium uc-text-18">{category.label}</h3>
      </div>
      <div className="uc-px-4">
        <p className="uc-mb-4">{category.description}</p>
        {category.services
          .filter((service) => !service.isHidden)
          .map((service) => (
            <ContentService key={service.id} service={service} />
          ))}
      </div>
    </div>
  ) : null;
};