import React, { useState, useEffect } from "react";
import Table from "./result-table";
import "./favorite-venues.css";

const columns = [
    { label: "Name", accessor: "name", sortable: true, sortbyOrder: "asc"},
    { label: "Price", accessor: "price", sortable: true, sortbyOrder: "desc"},
    { label: "Ratings", accessor: "rating", sortable: true, sortbyOrder: "desc" },
    { label: "Distance", accessor: "distance"},
];

const FavoriteVenue = () => {
    let returnValue;
    let venues = JSON.parse(window.localStorage.getItem("fav_venues"));
    console.log(venues)
    if (venues.length !== 0){
        returnValue = <Table class="fav-table" caption=""
        data={JSON.parse(window.localStorage.getItem("fav_venues"))}
        columns= {columns}/>;
    } else {
        returnValue = <p class = "no-fav"> No favorites yet...</p>
    }
    return(
        <div>
            <a  href="http://localhost:3000/venue-search" class="back-button">Go Back to Search</a>
            <h3 class = "favorite-title">Favorites</h3> 
            {returnValue}
        </div>
    );
};

export default FavoriteVenue;