import { Colors } from '@/constants/Colors';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { STATUS_COLORS } from './constants';
import { DayCellProps } from './types';

export const DayCell: React.FC<DayCellProps> = ({ cell, isSelected, onPress }) => {
  const status = cell.info?.status;
  const colors = status ? STATUS_COLORS[status] : undefined;

  return (
    <TouchableOpacity
      activeOpacity={0.8}
      style={styles.dayCell}
      onPress={onPress}
    >
      <View
        style={[
          styles.dayCircle,
          colors && { backgroundColor: colors.bg },
          isSelected && styles.dayCircleSelected,
          cell.isToday && styles.todayOutline,
        ]}
      >
        <Text
          style={[
            styles.dayLabel,
            colors && { color: colors.text },
            !colors && styles.dayLabelDefault,
          ]}
        >
          {cell.label}
        </Text>
      </View>
      {cell.isToday && <Text style={styles.todayText}>今天</Text>}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  dayCell: {
    width: '14.28%',
    alignItems: 'center',
    marginVertical: 6,
  },
  dayCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f3f4f6',
  },
  dayCircleSelected: {
    borderWidth: 2,
    borderColor: Colors.light.primary,
  },
  todayOutline: {
    borderWidth: 2,
    borderColor: '#94a3b8',
  },
  dayLabel: {
    fontSize: 15,
    fontFamily: 'AliBold',
  },
  dayLabelDefault: {
    color: '#111827',
  },
  todayText: {
    fontSize: 10,
    color: '#9ca3af',
    marginTop: 2,
    fontFamily: 'AliRegular',
  },
});