import { Pressable, ScrollView, Text } from 'react-native';

export type PillTab<T extends string> = {
  badge?: number | string;
  label: string;
  value: T;
};

export const PillTabs = <T extends string>({
  onChange,
  tabs,
  value,
}: {
  onChange: (value: T) => void;
  tabs: PillTab<T>[];
  value: T;
}) => (
  <ScrollView
    horizontal
    className='-mx-1'
    contentContainerClassName='gap-2 px-1'
    keyboardShouldPersistTaps='handled'
    showsHorizontalScrollIndicator={false}
  >
    {tabs.map((tab) => {
      const active = tab.value === value;
      return (
        <Pressable
          key={tab.value}
          className={
            active
              ? 'bg-primary min-h-9 flex-row items-center gap-2 rounded-md px-3'
              : 'bg-muted min-h-9 flex-row items-center gap-2 rounded-md px-3'
          }
          onPress={() => onChange(tab.value)}
        >
          <Text
            className={
              active
                ? 'text-primary-foreground text-xs font-semibold'
                : 'text-muted-foreground text-xs font-semibold'
            }
          >
            {tab.label}
          </Text>
          {tab.badge === undefined ? null : (
            <Text
              className={
                active
                  ? 'text-primary-foreground text-xs'
                  : 'text-muted-foreground text-xs'
              }
            >
              {tab.badge}
            </Text>
          )}
        </Pressable>
      );
    })}
  </ScrollView>
);
