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';
import { useAppSelector } from '@store';

// 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);
  const { offers } = useAppSelector(state => state.offer);
  // console.log(offers);

  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?.title}</Text>
              <Text style={styles.offerDescription}>{item?.description}</Text>
              {/* <Text style={styles.offerExpiry}>
                Expires: {new Date(item?.).toLocaleDateString()}
              </Text> */}
            </View>
            <TouchableOpacity
              style={styles.copyButton}
              onPress={() => {}}
              activeOpacity={0.7}
            >
              <Text style={styles.copyButtonText}>Copy</Text>
            </TouchableOpacity>
          </View>
        )}
        contentContainerStyle={styles.list}
      />
    </View>
  );
};