import React from "react";
import Layout from "../../../components/layout/Layout";
import MyWhishList from "../../../components/user/MyWhishList";
import { useSelector } from "react-redux";
import { Skeleton } from "antd";

export default function UserProfilePage() {
  const { wishlists, loading } = useSelector(state => state.wishlists);
  return (
    <Layout>
      {loading ? (
        <div className="container">
          <div className="py-5">
            <div className="row">
              {[1, 2, 3].map(() => (
                <div className="col-lg-3 col-md-4 col-sm-12">
                  <div className="d-inline-flex flex-column">
                    <Skeleton.Button active style={{ height: 250, width: 290 }} />
                    <Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <MyWhishList data={wishlists} />
      )}
    </Layout>
  );
}