import React from 'react';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
import client from '../apollo/client';

// GraphQL query to fetch data
const GET_PRODUCTS_QUERY = gql`
  query GetProducts {
    products {
      name
      description
      image
      availability
      slug
    }
  }
`;

// Component to fetch and display data
const ProductsList = () => {
  const { loading, error, data } = useQuery(GET_PRODUCTS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.products.map(product => (
        <div key={product.slug}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <img src={product.image} alt={product.name} />
          <p>{product.availability ? 'Available' : 'Out of stock'}</p>
        </div>
      ))}
    </div>
  );
};

// ApolloProvider wraps your React app and places Apollo Client on the context
const Products = () => (
  <ApolloProvider client={client}>
    <h1>Products</h1>
    <ProductsList />
  </ApolloProvider>
);

export default Products;