import { StyleSheet, Text, View } from 'react-native';

import { Colors, Radius } from '@/constants/theme';
import { claimStatusMeta, type ClaimStatus } from '@/shared/domain/claim';

const toneColors = {
  success: { background: '#DFF8EC', text: '#047857' },
  warning: { background: '#FFF3DC', text: '#B45309' },
  danger: { background: '#FEE2E2', text: '#B91C1C' },
  info: { background: '#E8F1FF', text: '#1D4ED8' },
  muted: { background: '#EEF4F8', text: '#58677F' },
};

type Props = {
  status: ClaimStatus;
};

export function StatusPill({ status }: Props) {
  const meta = claimStatusMeta[status];
  const tone = toneColors[meta.tone];

  return (
    <View style={[styles.pill, { backgroundColor: tone.background }]}>
      <Text style={[styles.text, { color: tone.text }]}>{meta.label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  pill: {
    alignSelf: 'flex-start',
    borderRadius: Radius.pill,
    minHeight: 28,
    paddingHorizontal: 12,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: Colors.light.border,
  },
  text: {
    fontSize: 12,
    fontWeight: '800',
  },
});
