import { AccountStatusCard } from '#/components/organisms/account-status-card.jsx';
import { AppPasswordsCard } from '#/components/organisms/app-passwords-card.jsx';
import { EmailCard } from '#/components/organisms/email-card.jsx';
import { PasswordCard } from '#/components/organisms/password-card.jsx';
import { SessionsCard } from '#/components/organisms/sessions-card.jsx';
import { SignInMethods } from '#/components/organisms/sign-in-methods.jsx';

export function SecurityPage({ data }) {
  return (
    <div className="grid grid-cols-1 items-start gap-5 lg:grid-cols-[1fr_360px]">
      <div className="space-y-5">
        {data.features.passkeys && <SignInMethods did={data.did} />}
        {data.features.sessions && <SessionsCard />}
        {data.features.passwordChange && <PasswordCard />}
        <AppPasswordsCard />
      </div>
      <div className="space-y-5">
        {data.features.email && <EmailCard />}
        <AccountStatusCard status={data.status} readOnly={data.readOnly} />
      </div>
    </div>
  );
}