import { View } from 'react-native';
import { useColors } from '../lib/theme';

export function PostCardSkeleton() {
  const colors = useColors();
  return (
    <View style={{ backgroundColor: colors.bg, borderWidth: 1, borderColor: colors.border, borderRadius: 16, padding: 16, marginBottom: 12 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: colors.surfaceElevated }} />
        <View style={{ flex: 1, gap: 6 }}>
          <View style={{ height: 12, backgroundColor: colors.surfaceElevated, borderRadius: 6, width: '33%' }} />
          <View style={{ height: 10, backgroundColor: colors.surface, borderRadius: 6, width: '25%' }} />
        </View>
      </View>
      <View style={{ height: 12, backgroundColor: colors.surfaceElevated, borderRadius: 6, width: '100%', marginBottom: 8 }} />
      <View style={{ height: 12, backgroundColor: colors.surfaceElevated, borderRadius: 6, width: '75%', marginBottom: 8 }} />
      <View style={{ height: 12, backgroundColor: colors.surface, borderRadius: 6, width: '50%' }} />
    </View>
  );
}