import React from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { getStyles } from './offersScreen.styles';
import { Header } from '@components';
import { useAppTheme } from '@theme';

const OFFERS = [
  { id: '1', code: 'WELCOME50', description: '50% off on your first order', expiry: '30 Jul 2026' },
  { id: '2', code: 'FLAT20', description: 'Flat ₹20 off on orders above ₹199', expiry: '15 Aug 2026' },
  { id: '3', code: 'FREEDEL', description: 'Free delivery on orders above ₹299', expiry: '31 Jul 2026' },
];

export const OffersScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <Header title="Offers" />
      <FlatList
        data={OFFERS}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.offerCard}>
            <View style={styles.offerInfo}>
              <Text style={styles.offerCode}>{item.code}</Text>
              <Text style={styles.offerDescription}>{item.description}</Text>
              <Text style={styles.offerExpiry}>Expires: {item.expiry}</Text>
            </View>
            <TouchableOpacity
              style={styles.copyButton}
              onPress={() => {}}
              activeOpacity={0.7}
            >
              <Text style={styles.copyButtonText}>Copy</Text>
            </TouchableOpacity>
          </View>
        )}
        contentContainerStyle={styles.list}
      />
    </View>
  );
};