import type { HTMLAttributes, ReactNode } from 'react'

import { classNames } from '../lib/class-names'

export type SurfaceElement = 'div' | 'section' | 'article' | 'aside'
export type SurfaceElevation = 'flat' | 'raised' | 'overlay'

export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
  readonly as?: SurfaceElement
  readonly elevation?: SurfaceElevation
  readonly children: ReactNode
}

export function Surface({
  as: Component = 'div',
  elevation = 'flat',
  className,
  children,
  ...props
}: SurfaceProps) {
  return (
    <Component
      className={classNames(
        'drb-surface',
        `drb-surface--${elevation}`,
        className,
      )}
      {...props}
    >
      {children}
    </Component>
  )
}