import { observer } from "mobx-react";
// buzzwareTech imports
import { WORKSPACE_SETTINGS } from "@buzzwaretech/constants";
import { useTranslation } from "@buzzwaretech/i18n";
import { Breadcrumbs } from "@buzzwaretech/ui";
// components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
import { SettingsPageHeader } from "@/components/settings/page-header";
import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";

export const ExportsWorkspaceSettingsHeader = observer(
  function ExportsWorkspaceSettingsHeader() {
    // translation
    const { t } = useTranslation();
    // derived values
    const settingsDetails = WORKSPACE_SETTINGS.export;
    const Icon = WORKSPACE_SETTINGS_ICONS.export;

    return (
      <SettingsPageHeader
        leftItem={
          <div className="flex items-center gap-2">
            <Breadcrumbs>
              <Breadcrumbs.Item
                component={
                  <BreadcrumbLink
                    label={t(settingsDetails.i18n_label)}
                    icon={<Icon className="size-4 text-tertiary" />}
                  />
                }
              />
            </Breadcrumbs>
          </div>
        }
      />
    );
  },
);