digital-pilates/components/TimeTabSelector.tsx

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export type TimeTabType = 'day' | 'week' | 'month';

interface TimeTabSelectorProps {
  selectedTab: TimeTabType;
  onTabChange: (tab: TimeTabType) => void;
}

interface TabOption {
  key: TimeTabType;
  label: string;
}

const tabOptions: TabOption[] = [
  { key: 'day', label: '按天' },
  { key: 'week', label: '按周' },
  { key: 'month', label: '按月' },
];

export function TimeTabSelector({ selectedTab, onTabChange }: TimeTabSelectorProps) {
  const theme = useColorScheme() ?? 'light';
  const colorTokens = Colors[theme];

  return (
    <View style={[styles.container]}>
      <View style={[styles.tabContainer]}>
        {tabOptions.map((option) => {
          const isSelected = selectedTab === option.key;

          return (
            <TouchableOpacity
              key={option.key}
              style={[
                styles.tab,
                {
                  backgroundColor: isSelected
                    ? colorTokens.primary
                    : 'transparent',
                }
              ]}
              onPress={() => onTabChange(option.key)}
              activeOpacity={0.7}
            >
              <Text
                style={[
                  styles.tabText,
                  {
                    color: isSelected
                      ? 'white'
                      : colorTokens.textSecondary,
                    fontWeight: isSelected ? '700' : '500',
                  }
                ]}
              >
                {option.label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  tabContainer: {
    flexDirection: 'row',
    borderRadius: 20,
    padding: 4,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  tab: {
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabText: {
    fontSize: 14,
    textAlign: 'center',
  },
});