"use client"

import { Children, type ReactNode } from "react"
import { cn } from "@/lib/utils"
import {
  MAIL_SETTINGS_PAGE_MASONRY_CLASS,
  MAIL_SETTINGS_PAGE_MASONRY_ITEM_CLASS,
} from "@/lib/mail-chrome-classes"

export function AutomationTabMasonry({
  columns,
  children,
  className,
}: {
  columns: 1 | 2
  children: ReactNode
  className?: string
}) {
  if (columns === 1) {
    return <div className={cn("space-y-4", className)}>{children}</div>
  }

  const items = Children.toArray(children).filter(Boolean)

  return (
    <div
      className={cn(
        "space-y-4 lg:space-y-0",
        MAIL_SETTINGS_PAGE_MASONRY_CLASS,
        className
      )}
    >
      {items.map((child, index) => (
        <div key={index} className={MAIL_SETTINGS_PAGE_MASONRY_ITEM_CLASS}>
          {child}
        </div>
      ))}
    </div>
  )
}