import React, { useState } from 'react';

type Props = {
  onClaim: any;
};

const dummyOffers = [
  {
    id: 1,
    name: 'Offer 1',
    expired: '07 Jan 2024',
    value: '10% Off',
    code: 'OFFER1',
  },
  {
    id: 2,
    name: 'Offer 2',
    expired: '07 Jan 2024',
    value: '10% Off',
    code: 'OFFER2',
  },
  {
    id: 3,
    name: 'Offer 3',
    expired: '07 Jan 2024',
    value: '10% Off',
    code: 'OFFER3',
  },
];

export default function Offers(props: Props) {
  const { onClaim } = props || {};

  const renderItem = (item: any) => {
    return (
      <div style={styles.row}>
        <div style={styles.column}>
          <label style={styles.itemName}>{item.name}</label>
          <label style={styles.itemExpired}>Expiry: {item.expired}</label>
        </div>
        <div style={styles.column}>
          <label style={styles.itemValue}>{item.value}</label>
          <button style={styles.button} onClick={() => onClaim(item.code)}>
            Claim
          </button>
        </div>
      </div>
    );
  };

  return (
    <div style={styles.container}>
      <img
        src="https://zeqapay.com/wp-content/uploads/2023/10/Zeqa-logo-100.png"
        style={styles.logo}
      />
      <label style={styles.subTitle}>Login for personalised offer from</label>
      <div style={styles.content}>
        {dummyOffers.map((item: any) => {
          return renderItem(item);
        })}
      </div>
    </div>
  );
}

const styles: any = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    border: '1px solid #e5e5ea',
    padding: 30,
  },
  logo: {
    width: 125,
    height: 65,
    objectFit: 'contain',
  },
  subTitle: {
    marginTop: 10,
    marginBottom: 30,
    color: '#1A1C1E',
  },
  row: {
    width: 300,
    padding: 10,
    border: '1px solid #e5e5ea',
    borderRadius: 7,
    marginBottom: 10,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  column: {
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
    justifyContent: 'space-between',
  },
  button: {
    width: 80,
    height: 30,
    color: '#FFFFFF',
    backgroundColor: '#009245',
    borderRadius: 7,
  },
  itemName: {
    fontSize: 15,
    color: '#1A1C1E',
  },
  itemExpired: {
    fontSize: 15,
    color: '#1A1C1E',
    fontStyle: 'italic',
  },
  itemValue: {
    fontSize: 15,
    fontWeight: 'bold',
    color: '#1A1C1E',
  },
  content: {
    overflowY: 'auto',
  },
};