import { StyleSheet, Text, View } from "@react-pdf/renderer";
import { pond } from "protobuf-ts/pond";
import { getDistanceUnit } from "utils";

interface Props {
  borderColour: string;
}

export default function MountingTableHeader(props: Props) {
  const borderColor = props.borderColour;
  const styles = StyleSheet.create({
    view: {
      flexDirection: "row",
      borderBottomColor: borderColor,
      borderBottomWidth: 1,
      alignItems: "center",
      height: 24,
      textAlign: "center",
      fontFamily: "Helvetica-Bold",
      flexGrow: 1
    },
    orbit: {
      width: "14%",
      borderRightColor: borderColor,
      borderRightWidth: 1
    },
    centerDist: {
      width: "25%",
      borderRightColor: borderColor,
      borderRightWidth: 1
    },
    roofDist: {
      width: "33%",
      borderRightColor: borderColor,
      borderRightWidth: 1
    },
    bracket: {
      width: "28%"
    }
  });

  return (
    <View style={styles.view}>
      <Text style={styles.orbit}>Orbit</Text>
      <Text style={styles.centerDist}>
        Radius {getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"}
      </Text>
      <Text style={styles.roofDist}>
        Along Roof {getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"}
      </Text>
      <Text style={styles.bracket}>Bracket</Text>
    </View>
  );
}
