import React from "react";
import type { ComponentProps } from "react";
import { View } from "react-native";
import { Content, Divider, Heading, Text } from "@jobber/components-native";

type DividerProps = ComponentProps<typeof Divider>;

export function DividerVertical(props: Partial<DividerProps>) {
  return (
    <View>
      <View style={{ marginBottom: 16 }}>
        <Heading>Summary</Heading>
      </View>
      <View
        style={{
          display: "flex",
          flexDirection: "row",
          height: 40,
          gap: 16,
        }}
      >
        <Content spacing="small">
          <Heading level="subHeading">Today</Heading>
          <Text>{"\n"}$104.13</Text>
        </Content>
        <Divider size="base" direction="vertical" {...props} />
        <Content spacing="small">
          <Heading level="subHeading">Tomorrow</Heading>
          <Text>{"\n"}$262.42</Text>
        </Content>
        <Divider size="base" direction="vertical" {...props} />
        <Content spacing="small">
          <Heading level="subHeading">Next Week</Heading>
          <Text>{"\n"}$123.23</Text>
        </Content>
      </View>
    </View>
  );
}