import React from 'react';
import type { LayoutChangeEvent } from 'react-native';
import Typography from '../../Typography';
import { StyledChartHeader } from '../StyledChart';
import type { HeaderConfig } from '../types';
import Box from '../../Box';

type ChartHeaderProps = HeaderConfig & {
  onLayout?: (event: LayoutChangeEvent) => void;
};

const ChartHeader = ({ title, actionsExtra, onLayout }: ChartHeaderProps) => (
  <StyledChartHeader onLayout={onLayout}>
    <Box>{title && <Typography.Body>{title}</Typography.Body>}</Box>
    <Box>{actionsExtra}</Box>
  </StyledChartHeader>
);

export default ChartHeader;