// components/admin/tabs/AccountsTab.js
import Link from "next/link";

export default function AccountsTab({ userData }) {
    return (
        <div>
            <h1>User Accounts</h1>
            <p>Number of accounts created: {userData.length}</p>

            <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
                <div className="govuk-summary-list__row results-headings">
                    <dd className="govuk-summary-list__key govuk-!-font-size-16">
                        Name
                    </dd>
                    <dd className="govuk-summary-list__key govuk-!-font-size-16">
                        Last accessed
                    </dd>
                </div>

                {userData.map((user) => (
                    <div key={user.id} className="govuk-summary-list__row">
                        <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
                            <Link
                                target="_blank"
                                href={`/auth/signin2?email=${user.email}`}
                            >
                                {user.email}
                            </Link>
                            <br />
                            {user.id}
                        </dd>
                        <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
                            Last accessed: {user.created}
                        </dd>
                    </div>
                ))}
            </dl>
        </div>
    );
}