<!--
  @component Renders a single list item in the settings navigation sidebar.
-->
<script lang="ts">
  import Text from '~/app/ui/components/atoms/text/Text.svelte';
  import type {SettingsNavItemProps} from '~/app/ui/components/partials/settings-nav/internal/settings-nav-list/internal/settings-nav-item/props';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';

  const {iconName, isActive = false, onclick, title, subtitle}: SettingsNavItemProps = $props();
</script>

<button class="container" class:active={isActive} {onclick}>
  <span class="icon">
    <MdIcon theme="Outlined">{iconName}</MdIcon>
  </span>
  <div class="content">
    <Text text={title} alignment="start" color="mono-high" family="secondary" size="body" />
    <Text text={subtitle} alignment="start" color="mono-low" family="secondary" size="body-small" />
  </div>
</button>

<style lang="scss">
  @use 'component' as *;
  $-temp-vars: (--cc-t-background-color);
  $-fade-width: rem(48px);

  .container {
    @include def-var(
      $--ic-swipe-area-right-size: 75%,
      $--cc-profile-picture-overlay-background-color: var($-temp-vars, --cc-t-background-color)
    );
    @extend %neutral-input;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    gap: rem(12px);
    padding: rem(10px) rem(16px);
    width: 100%;
    background-color: var($-temp-vars, --cc-t-background-color);

    .icon {
      display: flex;
      place-items: center;
      font-size: rem(24px);
      line-height: rem(24px);
      color: var(--c-menu-item-icon-color);
      padding: rem(8px);
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
    }

    &:hover {
      @include def-var(
        $-temp-vars,
        --cc-t-background-color,
        var(--cc-conversation-preview-background-color--hover)
      );
    }

    &.active {
      @include def-var(
        $-temp-vars,
        --cc-t-background-color,
        var(--cc-conversation-preview-background-color--active)
      );
    }
  }
</style>
