import { StyleSheet, Text, View } from 'react-native';

import { ActionButton } from '@/shared/components/ActionButton';
import { ClaimCard } from '@/shared/components/ClaimCard';
import { Screen } from '@/shared/components/Screen';
import { Colors, Radius, Spacing } from '@/constants/theme';
import { myClaims } from '@/shared/mock/claims';

export default function ClaimsScreen() {
  return (
    <Screen title="我的报销" subtitle="查看草稿、审批中、已通过、已驳回和已付款的报销单。">
      <View style={styles.searchBox}>
        <Text style={styles.searchText}>搜索报销单号、事由、费用类型、金额</Text>
      </View>

      <View style={styles.actionRow}>
        <ActionButton accessibilityLabel="新建报销">新建报销</ActionButton>
        <ActionButton accessibilityLabel="筛选报销单" variant="secondary">
          筛选
        </ActionButton>
      </View>

      {myClaims.map((claim) => (
        <ClaimCard key={claim.id} claim={claim} />
      ))}
    </Screen>
  );
}

const styles = StyleSheet.create({
  searchBox: {
    minHeight: 48,
    borderRadius: Radius.md,
    borderWidth: 1,
    borderColor: Colors.light.border,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    paddingHorizontal: Spacing.four,
  },
  searchText: {
    color: Colors.light.textSecondary,
    fontSize: 14,
  },
  actionRow: {
    flexDirection: 'row',
    gap: Spacing.three,
  },
});
