import React, { Children, ReactNode } from 'react'
import BaseIcon from './BaseIcon'
import IconRounded from './IconRounded'
import { humanize } from '../helpers/humanize';

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

export default function SectionTitleLineWithButton({
  icon,
  title,
  main = false,
  subtitle,
  children,
}: Props) {
  const childArray = Children.toArray(children).filter((child) => !(typeof child === 'string' && child.trim() === ''))
  const hasChildren = childArray.length > 0

  return (
    <section
      className={`${main ? '' : 'pt-6'} mb-6 flex flex-col gap-4 md:flex-row md:items-start md:justify-between`}
    >
      <div className="flex min-w-0 items-start justify-start gap-3">
        {icon && main && <IconRounded icon={icon} color="light" className="mt-1" bg />}
        {icon && !main && <BaseIcon path={icon} className="mt-1" size="20" />}
        <div className="min-w-0">
          <h1 className={`leading-tight ${main ? 'text-3xl' : 'text-2xl'}`}>{humanize(title)}</h1>
          {subtitle ? (
            <p className="mt-2 max-w-3xl text-sm leading-6 text-gray-500 dark:text-slate-400">{subtitle}</p>
          ) : null}
        </div>
      </div>
      {hasChildren ? <div className="flex flex-wrap items-center gap-3">{childArray}</div> : null}
    </section>
  )
}
