import { mdiCog } from '@mdi/js';
import React, { Children, ReactNode } from 'react';
import BaseButton from './BaseButton';
import BaseIcon from './BaseIcon';
import { humanize } from '../helpers/humanize';

type Props = {
  icon: string;
  title: string;
  main?: boolean;
  children?: ReactNode;
};

export default function SectionTitleLineWithButton({
  icon,
  title,
  main = false,
  children,
}: Props) {
  const hasChildren = !!Children.count(children);

  return (
    <section
      className={`${
        main ? '' : 'pt-6'
      } mb-6 flex flex-col gap-4 border-b border-slate-200 pb-5 sm:flex-row sm:items-center sm:justify-between`}
    >
      <div className='flex items-center justify-start gap-3'>
        {icon && (
          <span className='inline-flex h-11 w-11 items-center justify-center rounded-xl border border-emerald-200 bg-emerald-50 text-emerald-700'>
            <BaseIcon path={icon} size='22' />
          </span>
        )}
        <div>
          <p className='text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700'>
            Supplier operations
          </p>
          <h1
            className={`mt-1 font-semibold leading-tight text-slate-950 dark:text-white ${
              main ? 'text-3xl' : 'text-2xl'
            }`}
          >
            {humanize(title)}
          </h1>
        </div>
      </div>
      {children}
      {!hasChildren && <BaseButton icon={mdiCog} color='whiteDark' />}
    </section>
  );
}
