"use client";

import ConnectionDetailsCard from "@/lib/components/ui/user/ConnectionDetailsCard";
import OwnAliasesCard from "@/lib/components/ui/user/OwnAliasesCard";
import OwnCredentialsCard from "@/lib/components/ui/user/OwnCredentialsCard";
import TempAliasesCard from "@/lib/components/ui/user/TempAliasesCard";
import useWindowDimensions from "@/lib/hooks/useWindowDimensions";
import { Grid, Heading } from "@radix-ui/themes";

export default function SelfService() {
  const dimensions = useWindowDimensions();
  const mobileUi = dimensions.width < 1450;

  return (
    <>
      <Heading className="pb-4">Account settings</Heading>

      <Grid display="inline-grid" columns={mobileUi ? "1" : "4"} gap="4" width={mobileUi ? "100%" : "auto"}>
        <OwnCredentialsCard />
        <ConnectionDetailsCard />
        <OwnAliasesCard />
        <TempAliasesCard />
      </Grid>
    </>
  );
}
