import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Skeleton, SkeletonText, SkeletonCircle } from '../ui/Skeleton';
import { useTheme } from '../../theme/ThemeContext';

/**
 * Skeleton para una notificación
 */
export function NotificationItemSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.container, { borderBottomColor: colors.border }]}>
      <SkeletonCircle size={44} />
      <View style={styles.content}>
        <SkeletonText width="80%" height={14} />
        <SkeletonText width="100%" height={12} style={{ marginTop: 6 }} />
        <SkeletonText width="30%" height={10} style={{ marginTop: 8 }} />
      </View>
      <View style={styles.indicator}>
        <Skeleton width={8} height={8} borderRadius={4} />
      </View>
    </View>
  );
}

/**
 * Lista de skeletons de notificaciones
 */
export function NotificationListSkeleton({ count = 6 }: { count?: number }) {
  return (
    <View>
      {Array.from({ length: count }).map((_, index) => (
        <NotificationItemSkeleton key={index} />
      ))}
    </View>
  );
}

/**
 * Skeleton para el header de notificaciones
 */
export function NotificationHeaderSkeleton() {
  const { colors } = useTheme();

  return (
    <View style={[styles.header, { backgroundColor: colors.card }]}>
      <SkeletonText width={120} height={20} />
      <SkeletonText width={80} height={14} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 16,
    borderBottomWidth: 1,
  },
  content: {
    flex: 1,
    marginLeft: 12,
  },
  indicator: {
    justifyContent: 'center',
    paddingLeft: 8,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
  },
});