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

import Switch, { SwitchProps } from '../Switch';
import { Icon } from '../Icon';

type Props = {
  data: Category;
  checked: boolean;
  onMoreInfo: VoidFunction;
  onChange: SwitchProps['onChange'];
};

export const SettingItem = ({ data, checked, onChange, onMoreInfo }: Props): JSX.Element | null => {
  if (data.isHidden) {
    return null;
  }

  return (
    <div className="uc-flex uc-mb-4">
      <div className="uc-mr-4">
        <Switch
          onChange={onChange}
          id={data.slug}
          checked={data.isEssential || checked}
          disabled={data.isEssential}
          className="uc-block uc-mt-0.5"
        />
      </div>
      <div>
        <div className="uc-flex uc-justify-between uc-items-center uc-mb-2">
          <h4 className="uc-text-18 uc-font-medium">{data.label}</h4>
          <button onClick={onMoreInfo} className="uc-text-sand-dune">
            <Icon name="hint" />
          </button>
        </div>
        <p>{data.description}</p>
      </div>
    </div>
  );
};