import { useCoreServices } from '@learnitive/context';
import { FunMissing } from '@learnitive/ui-components';
import { Briefcase } from 'lucide-react';
import React from 'react';
import { NoticeView } from './notice-view';

/** Displays a notice indicating that the requested workspace could not be found, using NoticeView. */
export function WorkspaceNotFoundView({ wsName }: { wsName?: string }) {
  const coreServices = useCoreServices();

  const handleGoHome = () => {
    coreServices.navigation.goHome();
  };

  const handleCreateWorkspace = () => {
    coreServices.commandDispatcher.dispatch(
      'command::ui:create-workspace-dialog',
      null,
      'ui',
    );
  };

  return (
    <NoticeView
      title={t.app.workspaceNotFoundView.title}
      description={
        <>
          {wsName
            ? t.app.workspaceNotFoundView.description({ wsName })
            : t.app.workspaceNotFoundView.genericDescription}
          <br />
          <FunMissing />
        </>
      }
      illustration={
        <div className="flex items-center justify-center">
          <Briefcase
            className="h-24 w-24 stroke-[1.5] stroke-muted-foreground"
            aria-hidden="true"
          />
        </div>
      }
      actions={[
        {
          label: t.app.workspaceNotFoundView.goHomeButton,
          onClick: handleGoHome,
        },
        {
          label: t.app.pageWorkspaceNotFound.createWorkspaceButton, // Reusing translation key
          variant: 'outline',
          onClick: handleCreateWorkspace,
        },
      ]}
    />
  );
}