import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import Typography from '@mui/material/Typography';
import _ from '@lodash';
import clsx from 'clsx';
import { memo } from 'react';

function PropertiesHeader({ className, categories, layouts, onCategory, onLayout }) {
  return (
    <div
      className={clsx(
        'flex items-center gap-44 w-full py-9 px-52 rounded-20 bg-white shadow-light',
        className
      )}
    >
      <div className="grow flex items-center justify-start gap-16 py-16 border-r-1 border-common-disabled">
        {categories.map(({ name, amount, active }, idx) => (
          <button
            key={name + idx}
            type="button"
            className={clsx(
              'text-2xl	text-common-layout cursor-pointer',
              active && 'text-secondary-main font-semibold cursor-default'
            )}
            onClick={() => onCategory(name)}
          >{`${_.startCase(name)} (${amount})`}</button>
        ))}
      </div>

      <div className="flex items-center gap-60 py-16">
        {layouts.map(({ name, active }, idx) => (
          <button
            key={name + idx}
            type="button"
            className={clsx(
              'flex justify-center items-center gap-10 cursor-pointer',
              active && '!cursor-default'
            )}
            onClick={() => onLayout(name)}
          >
            <FuseSvgIcon className={clsx('text-common-secondary', active && 'text-secondary-main')}>
              {`heroicons-outline:view-${name}`}
            </FuseSvgIcon>
            <Typography
              variant="body1"
              className={clsx('text-2xl text-common-secondary', active && 'text-secondary-main')}
            >
              {_.startCase(name)}
            </Typography>
          </button>
        ))}
      </div>
    </div>
  );
}

export default memo(PropertiesHeader);