import React from 'react';
import { View } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import colors from '~/tailwind.config.js';

/**
 * Skeleton loader for WeekCard component
 */
const WeekCardSkeleton: React.FC = () => {
	const { isDark, themeVariant } = useTheme();

	const contentBackgroundColor = isDark
		? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
		: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
	const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
	const skeletonColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

	return (
		<View
			style={{
				backgroundColor: contentBackgroundColor,
				borderRadius: 16,
				borderWidth: 1.5,
				borderColor: borderColor,
				padding: 16,
				marginBottom: 12,
			}}
		>
			{/* Header with week title and dates */}
			<View
				style={{
					flexDirection: 'row',
					justifyContent: 'space-between',
					alignItems: 'center',
					marginBottom: 16,
				}}
			>
				{/* Week title skeleton */}
				<View
					style={{
						height: 18,
						width: '35%',
						backgroundColor: skeletonColor,
						borderRadius: 4,
					}}
				/>

				{/* Date range skeleton */}
				<View
					style={{
						height: 14,
						width: '40%',
						backgroundColor: skeletonColor,
						borderRadius: 4,
					}}
				/>
			</View>

			{/* Stats grid */}
			<View
				style={{
					flexDirection: 'row',
					justifyContent: 'space-between',
				}}
			>
				{/* 4 stat columns */}
				{[1, 2, 3, 4].map((index) => (
					<View
						key={index}
						style={{
							flex: 1,
							alignItems: 'center',
							marginHorizontal: 4,
						}}
					>
						{/* Stat value skeleton */}
						<View
							style={{
								height: 20,
								width: '80%',
								backgroundColor: skeletonColor,
								borderRadius: 4,
								marginBottom: 4,
							}}
						/>

						{/* Stat label skeleton */}
						<View
							style={{
								height: 12,
								width: '90%',
								backgroundColor: skeletonColor,
								borderRadius: 4,
							}}
						/>
					</View>
				))}
			</View>
		</View>
	);
};

export default WeekCardSkeleton;