import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import { STATUS_COLORS } from './constants';
import { LegendItem } from './types';

export const Legend: React.FC = () => {
  const { t } = useTranslation();
  const legendItems: LegendItem[] = [
    { label: t('menstrual.legend.period'), key: 'period' },
    { label: t('menstrual.legend.predictedPeriod'), key: 'predicted-period' },
    { label: t('menstrual.legend.fertile'), key: 'fertile' },
    { label: t('menstrual.legend.ovulation'), key: 'ovulation-day' },
  ];

  return (
    <View style={styles.legendRow}>
      {legendItems.map((item) => (
        <View key={item.key} style={styles.legendItem}>
          <View
            style={[
              styles.legendDot,
              { backgroundColor: STATUS_COLORS[item.key].bg },
              item.key === 'ovulation-day' && styles.legendDotRing,
            ]}
          />
          <Text style={styles.legendLabel}>{item.label}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  legendRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  legendItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  legendDot: {
    width: 16,
    height: 16,
    borderRadius: 8,
    marginRight: 6,
  },
  legendDotRing: {
    borderWidth: 2,
    borderColor: '#fff',
  },
  legendLabel: {
    fontSize: 13,
    color: '#111827',
    fontFamily: 'AliRegular',
  },
});