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 CableTableHeader(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
    },
    cell: {
      width: "20%",
      borderRightColor: borderColor,
      borderRightWidth: 1
    },
    endCell: {
      width: "20%"
    }
  });

  return (
    <View style={styles.view}>
      <Text style={styles.cell}>Orbit</Text>
      <Text style={styles.cell}>Type</Text>
      <Text style={styles.cell}>Qty</Text>
      <Text style={styles.cell}>
        Length {getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"}
      </Text>
      <Text style={styles.endCell}>Nodes</Text>
    </View>
  );
}