managarten/memoro/apps/mobile/components/skeletons/sections/AudioPlayerSkeleton.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import { getSkeletonColor, skeletonBase, skeletonCircle, skeletonBox, skeletonRow, skeletonSpacing } from '../utils/skeletonStyles';
import { SkeletonAnimation } from '../utils/SkeletonAnimation';

export const AudioPlayerSkeleton: React.FC = () => {
  const { colors, isDark } = useTheme();
  const skeletonColor = getSkeletonColor(isDark, colors);

  return (
    <SkeletonAnimation style={styles.container}>
      <View style={[styles.playerCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
        <View style={[skeletonRow, styles.controls]}>
          <View style={[skeletonBase, skeletonCircle(48), { backgroundColor: skeletonColor }]} />
          <View style={styles.progressContainer}>
            <View style={[skeletonBase, skeletonBox('100%', 4), { backgroundColor: skeletonColor }]} />
            <View style={[skeletonRow, styles.timeRow]}>
              <View style={[skeletonBase, skeletonBox(40, 12), { backgroundColor: skeletonColor }]} />
              <View style={styles.spacer} />
              <View style={[skeletonBase, skeletonBox(40, 12), { backgroundColor: skeletonColor }]} />
            </View>
          </View>
        </View>
      </View>
    </SkeletonAnimation>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,  // Same as audioPlayerContainer
    marginBottom: 20,       // Same as audioPlayerContainer
  },
  playerCard: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
  },
  controls: {
    gap: skeletonSpacing.md,
  },
  progressContainer: {
    flex: 1,
    gap: skeletonSpacing.xs,
  },
  timeRow: {
    justifyContent: 'space-between',
  },
  spacer: {
    flex: 1,
  },
});