"use client";
import Cards from "../cards";
import CustomerList from "../../reusables/ui/customerlist";
import { useSelector } from "react-redux";
import { RootState } from "@/src/redux/store";
import CustomerDetails from "../../reusables/ui/view";
import AuthGuard from "../../reusables/auth";

export default function VerifiedAddresses() {
  const { isOpen } = useSelector(
    (state: RootState) => state.counter.viewCustomer
  );

  return (
    <AuthGuard>
      <div className="space-y-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <Cards
            title="Total Customers"
            statValue={42}
            profitValue={23}
            iconPath="/images/hand.svg"
          />
          <Cards
            title="New Customers"
            statValue={5}
            profitValue={6}
            iconPath="/images/person.svg"
          />
          <Cards
            title="Deactivated Accounts"
            statValue={14}
            profitValue={3}
            iconPath="/images/modules.svg"
          />
        </div>

        <div className="bg-white p-10 my-8 rounded-md">
          {isOpen ? <CustomerDetails /> : <CustomerList />}
        </div>
      </div>
    </AuthGuard>
  );
}
