'use client';

import { useTranslations } from 'next-intl';

import { Heading } from '@/components/ui/elements/Heading';
import { ToggleCardSkeleton } from '@/components/ui/elements/ToggleCard';
import { useCurrent } from '@/hooks/useCurrent';

import { CreateIngressForm } from './forms/CreateIngressForm';
import { StreamKey } from './forms/StreamKey';
import { StreamURL } from './forms/StreamURL';
import { InstructionModal } from './InstructionModal';

export const KeysSettings = () => {
  const t = useTranslations('dashboard.keys.header');

  const { user, isLoadingProfile } = useCurrent();

  return (
    <div className="lg:px-10">
      <div className="block items-center justify-between space-y-3 lg:flex lg:space-y-0">
        <Heading
          description={t('description')}
          size="lg"
          title={t('heading')}
        />

        <div className="flex items-center gap-x-4">
          <InstructionModal />

          <CreateIngressForm />
        </div>
      </div>

      <div className="mt-5 space-y-6">
        {isLoadingProfile
          ? Array.from({ length: 2 }).map((_, index) => (
            // eslint-disable-next-line react/no-array-index-key
            <ToggleCardSkeleton key={index} />
          ))
          : (
            <>
              <StreamURL value={user?.stream?.serverUrl} />

              <StreamKey value={user?.stream?.key} />
            </>
          )}
      </div>
    </div>
  );
};