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

import type { Badge } from '../types';

// ─────────────────────────────────────────────────────────────────────────────
// Props
// ─────────────────────────────────────────────────────────────────────────────

interface BadgeIconProps {
  badge: Badge;
  size?: 'small' | 'medium' | 'large';
  showName?: boolean;
  style?: object;
}

// ─────────────────────────────────────────────────────────────────────────────
// Component
// ─────────────────────────────────────────────────────────────────────────────

export function BadgeIcon({ badge, size = 'medium', showName = true, style }: BadgeIconProps) {
  const dimensions = {
    small: 40,
    medium: 60,
    large: 80,
  };

  const iconSize = dimensions[size];
  const isEarned = badge.isEarned;

  return (
    <View style={[styles.container, style]}>
      <View
        style={[
          styles.iconContainer,
          {
            width: iconSize,
            height: iconSize,
            borderRadius: iconSize / 2,
            opacity: isEarned ? 1 : 0.4,
          },
        ]}
      >
        {badge.imageUrl ? (
          <Image
            source={{ uri: badge.imageUrl }}
            style={{ width: iconSize - 8, height: iconSize - 8, borderRadius: (iconSize - 8) / 2 }}
            resizeMode="cover"
          />
        ) : (
          <Text style={{ fontSize: iconSize / 2 }}>🏅</Text>
        )}
      </View>

      {showName && (
        <Text style={[styles.name, { color: isEarned ? '#1F2937' : '#9CA3AF' }]} numberOfLines={2}>
          {badge.name}
        </Text>
      )}

      {isEarned && badge.earnedAt && (
        <Text style={styles.earnedDate}>{new Date(badge.earnedAt).toLocaleDateString()}</Text>
      )}
    </View>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Styles
// ─────────────────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 8,
    width: 80,
  },
  iconContainer: {
    backgroundColor: '#F3F4F6',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 4,
  },
  name: {
    fontSize: 11,
    fontWeight: '500',
    textAlign: 'center',
    marginTop: 4,
  },
  earnedDate: {
    fontSize: 9,
    color: '#9CA3AF',
    marginTop: 2,
  },
});

export default BadgeIcon;