import React, { FC, memo } from 'react'
import { StyleSheet, View } from 'react-native'
import { type TableTheme } from './theme'

type TableHeaderBackgroundProps = {
  theme: TableTheme
  width: number | null
  height: number | null
}

const TableHeaderBackground: FC<TableHeaderBackgroundProps> = memo(
  ({ theme, width, height }) => {
    if (width === null || height === null) {
      return null
    }

    const headerLayout = {
      width,
      height,
    }

    const viewStyles = [
      styles.headerBackground,
      theme.headerBackground,
      headerLayout,
    ]

    return <View style={viewStyles} />
  }
)

const styles = StyleSheet.create({
  headerBackground: {
    position: 'absolute',
    left: 0,
    top: 0,
  },
})

export default TableHeaderBackground