import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import type { FloorNumber } from '@repo/types'

const FLOORS: FloorNumber[] = [1, 2, 3, 4]
const FLOOR_LABEL: Record<FloorNumber, string> = { 1: '1F', 2: '2F', 3: '3F', 4: '楼顶' }

interface FloorTabsProps {
  currentFloor: FloorNumber
  onChange: (floor: FloorNumber) => void
}

export function FloorTabs({ currentFloor, onChange }: FloorTabsProps) {
  return (
    <View style={styles.container}>
      {FLOORS.map((floor) => {
        const active = floor === currentFloor
        return (
          <TouchableOpacity
            key={floor}
            style={[styles.tab, active && styles.activeTab]}
            onPress={() => onChange(floor)}
            activeOpacity={0.7}
          >
            <Text style={[styles.label, active && styles.activeLabel]}>
              {FLOOR_LABEL[floor]}
            </Text>
          </TouchableOpacity>
        )
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#F9FAFB',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#E5E7EB',
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 10,
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: '#10B981',
  },
  label: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6B7280',
  },
  activeLabel: {
    color: '#10B981',
    fontWeight: '700',
  },
})