import { ContentTree } from '@financial-times/content-tree'
import React from 'react'
import { ContentProps } from '../../types'

interface LayoutProps extends ContentProps<Omit<ContentTree.transit.Layout, 'children'>> {}

/*
 * @description Layout component is used to define the layout for content. It can be used with ContentTree Layout Nodes or as a static layout.
 * @param layoutWidth - The width of the layout within the containing grid.
 * @param layoutName - The name of the layout.
 * @param children - The content to be displayed in the layout.
 */
export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
  content: { layoutWidth, layoutName = 'auto' },
  children,
}) => {
  return (
    <div
      className="n-content-layout"
      data-layout-name={layoutName}
      data-layout-width={layoutWidth}
    >
      <LayoutContainer>{children}</LayoutContainer>
    </div>
  )
}

export const LayoutContainer: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  return <div className="n-content-layout__container">{children}</div>
}

export const LayoutSlot: React.FC<React.PropsWithChildren> = ({ children }) => {
  return <div className="n-content-layout__slot">{children}</div>
}