import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

import { Mono } from "@/components/Mono";
import { sansMedium } from "@/constants/typography";
import { formatINR } from "@/constants/mockData";
import { useColors } from "@/hooks/useColors";

interface PipelineStripProps {
  pending: number;
  confirmed: number;
  due: number;
  paid: number;
}

export function PipelineStrip({
  pending,
  confirmed,
  due,
  paid,
}: PipelineStripProps) {
  const colors = useColors();
  const items = [
    { label: "Pending", value: pending, dot: colors.warning },
    { label: "Confirmed", value: confirmed, dot: colors.success },
    { label: "Due", value: due, dot: colors.primary },
    { label: "Paid", value: paid, dot: colors.textSecondary },
  ];
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.row}
    >
      {items.map((it) => (
        <View
          key={it.label}
          style={[
            styles.cell,
            { backgroundColor: colors.card, borderColor: colors.border },
          ]}
        >
          <View style={styles.labelRow}>
            <View style={[styles.dot, { backgroundColor: it.dot }]} />
            <Text
              style={{
                color: colors.mutedForeground,
                fontFamily: sansMedium,
                fontSize: 11,
                letterSpacing: 0.6,
                textTransform: "uppercase",
              }}
            >
              {it.label}
            </Text>
          </View>
          <Mono size={20} weight="700" color={colors.text}>
            {formatINR(it.value)}
          </Mono>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: {
    paddingHorizontal: 20,
    gap: 10,
  },
  cell: {
    minWidth: 132,
    borderRadius: 16,
    borderWidth: 1,
    paddingHorizontal: 14,
    paddingVertical: 14,
    gap: 8,
  },
  labelRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  dot: {
    width: 7,
    height: 7,
    borderRadius: 999,
  },
});