import ComponentsUsersAccountSettingsTabs from '@/components/users/account-settings/components-users-account-settings-tabs';
import { SubscriptionProvider } from '@/components/billing/subscription-context';
import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';

export const metadata: Metadata = {
  title: 'Account Setting',
};

export default function UserAccountSettings() {
  return (
    <SubscriptionProvider>
      <div>
        <ul className="flex space-x-2 rtl:space-x-reverse">
          <li>
            <Link href="#" className="text-primary hover:underline">
              Users
            </Link>
          </li>
          <li className="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
            <span>Account Settings</span>
          </li>
        </ul>

        <ComponentsUsersAccountSettingsTabs />
      </div>
    </SubscriptionProvider>
  );
}