import { h, type FunctionComponent, type JSX } from 'preact'
import s from './row.module.scss'

const Row: FunctionComponent<{ tag?: keyof JSX.IntrinsicElements }> = ({ children, tag: Tag = 'div' }) => (
  <Tag className={s.row}>{children}</Tag>
)

export default Row

export const Cell: FunctionComponent<{ grow?: string; tag?: keyof JSX.IntrinsicElements }> = ({
  children,
  grow,
  tag: Tag = 'div',
}) => <Tag style={{ flexGrow: grow }}>{children}</Tag>