import React, { memo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTheme, fontFamily } from '../../../theme';
import { formatCurrency } from '../../../utils/formatters';
import type { LoanEmiScheduleItem } from '../../../types/app';

interface EmiScheduleRowProps {
  item: LoanEmiScheduleItem;
  isHeader?: boolean;
}

const EmiScheduleRowComponent = ({ item, isHeader }: EmiScheduleRowProps) => {
  const theme = useTheme();

  if (isHeader) {
    return (
      <View style={[styles.row, styles.headerRow, { borderBottomColor: theme.colors.cardBorder }]}>
        <Text style={[styles.cell, styles.monthCell, styles.headerText, { color: theme.colors.textSecondary }]}>Month</Text>
        <Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>EMI</Text>
        <Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Principal</Text>
        <Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Interest</Text>
        <Text style={[styles.cell, styles.headerText, { color: theme.colors.textSecondary }]}>Balance</Text>
      </View>
    );
  }

  return (
    <View style={[styles.row, { borderBottomColor: theme.colors.cardBorder }]}>
      <Text style={[styles.cell, styles.monthCell, { color: theme.colors.textPrimary }]}>{item.month}</Text>
      <Text style={[styles.cell, { color: theme.colors.textPrimary }]}>{formatCurrency(item.emiAmount)}</Text>
      <Text style={[styles.cell, { color: theme.colors.success }]}>{formatCurrency(item.principalComponent)}</Text>
      <Text style={[styles.cell, { color: theme.colors.warning }]}>{formatCurrency(item.interestComponent)}</Text>
      <Text style={[styles.cell, { color: theme.colors.textSecondary }]}>{formatCurrency(item.outstandingAfter)}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    paddingVertical: 10,
    borderBottomWidth: 1,
  },
  headerRow: {
    paddingVertical: 8,
    borderBottomWidth: 2,
  },
  cell: {
    flex: 1,
    fontSize: 11,
    fontFamily: fontFamily.medium,
    textAlign: 'right',
  },
  monthCell: {
    flex: 0.5,
    textAlign: 'center',
  },
  headerText: {
    fontSize: 10,
    fontFamily: fontFamily.bold,
    textTransform: 'uppercase',
    letterSpacing: 0.3,
  },
});

export const EmiScheduleRow = memo(EmiScheduleRowComponent);