import { Text, View, StyleSheet } from '@react-pdf/renderer';
import type { Style } from '@react-pdf/types';

type PdfStatusBadgeProps = {
  children: React.ReactNode;
  style?: Style;
};

const styles = StyleSheet.create({
  statusBadge: {
    paddingVertical: 2,
    paddingHorizontal: 4,
    borderRadius: 12,
    fontSize: 7,
    fontWeight: 'bold',
    borderWidth: 1,
    borderStyle: 'solid',
    backgroundColor: '#F5F5F5',
    borderColor: '#E5E7EB',
  },
  statusBadgeText: {
    fontSize: 7,
    fontWeight: 'bold',
    color: '#333333',
  },
});

export const PdfStatusBadge = ({ children, style }: PdfStatusBadgeProps) => {
  const styleRecord = style as Record<string, unknown>;
  const color = styleRecord?.color as string | undefined;

  const viewStyle = Object.entries(styleRecord || {}).reduce(
    (acc, [key, value]) => {
      if (key !== 'color') {
        acc[key] = value;
      }
      return acc;
    },
    {} as Record<string, unknown>
  );

  return (
    <View
      style={[
        styles.statusBadge,
        ...(Object.keys(viewStyle).length > 0 ? [viewStyle as Style] : []),
      ]}
    >
      <Text style={[styles.statusBadgeText, ...(color ? [{ color }] : [])]}>
        {children}
      </Text>
    </View>
  );
};