import { BackHeader, Text } from 'components';
import { StyleSystemThemedProps, SafeScreen, Container } from 'components/layout';
import { List } from 'components/notification';

export const Notification: React.FC<TopBarType> = ({ variant, ...props }) => {
  return (
    <SafeScreen edges={['top', 'bottom']} {...props}>
      <BackHeader
        isBack={true}
        leftElement={
          <Container>
            <Text ml="xs" variant="heading">
              Notifications
            </Text>
          </Container>
        }
      />
      <List notifications={[]} variant="surface" />
    </SafeScreen>
  );
};

type TopBarType = StyleSystemThemedProps & HappeningNowProps;
type HappeningNowVariant = 'float' | 'surface';
interface HappeningNowProps {
  variant: HappeningNowVariant;
}