@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/typography';
@use './empty' as *;

// Size configurations
$size-configs: (
  main: (
    icon-size: spacing.semantic-variable(size, element, extra),
    icon-color: none,
    title: h3,
    title-color: palette.semantic-variable(text, neutral-solid),
    description: body,
    description-color: palette.semantic-variable(text, neutral),
    padding-bottom: spacing.semantic-variable(padding, vertical, relaxed),
    gap-below-icon: spacing.semantic-variable(gap, comfort),
    gap-content: spacing.semantic-variable(gap, tight),
    gap-below-content: spacing.semantic-variable(gap, comfort),
    min-width: spacing.semantic-variable(size, container, slim),
    max-width: spacing.semantic-variable(size, container, narrow),
  ),
  sub: (
    icon-size: spacing.semantic-variable(size, element, airy),
    icon-color: palette.semantic-variable(icon, neutral-light),
    title: body-highlight,
    title-color: palette.semantic-variable(text, neutral-light),
    description: label-secondary,
    description-color: palette.semantic-variable(text, neutral-light),
    padding-bottom: spacing.semantic-variable(padding, vertical, spacious),
    gap-below-icon: spacing.semantic-variable(gap, slim),
    gap-content: spacing.semantic-variable(gap, tiny),
    gap-below-content: spacing.semantic-variable(gap, calm),
    min-width: spacing.semantic-variable(size, container, slim),
    max-width: spacing.semantic-variable(size, container, narrow),
  ),
  minor: (
    icon-size: spacing.semantic-variable(size, element, base),
    icon-color: palette.semantic-variable(icon, neutral-light),
    title: body,
    title-color: palette.semantic-variable(text, neutral-light),
    description: none,
    description-color: palette.semantic-variable(text, neutral-light),
    padding-bottom: none,
    gap-below-icon: none,
    gap-content: none,
    gap-below-content: none,
    min-width: none,
    max-width: none,
  ),
);

// Helper function to get size config
@function _get-size-config($size, $property) {
  $size-map: map.get($size-configs, $size);

  @if $size-map {
    $value: map.get($size-map, $property);

    @if $value == none {
      @return null;
    } @else {
      @return $value;
    }
  }

  @return null;
}

// Color variables
$icon-color: palette.semantic-variable(icon, neutral-subtle) !default;

.#{$prefix} {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;

  // Apply size-specific styles
  @each $size in $empty-sizes {
    &--#{$size} {
      padding-bottom: _get-size-config($size, padding-bottom);

      .#{$prefix}__icon {
        font-size: _get-size-config($size, icon-size);

        @if _get-size-config($size, icon-color) {
          color: _get-size-config($size, icon-color);
        }
      }

      .#{$prefix}__title {
        @include typography.semantic-variable(_get-size-config($size, title));

        color: _get-size-config($size, title-color);
      }

      @if $size != minor {
        .#{$prefix}__container {
          max-width: _get-size-config($size, max-width);
          min-width: _get-size-config($size, min-width);
        }

        .#{$prefix}__description {
          @include typography.semantic-variable(_get-size-config($size, description));

          color: _get-size-config($size, description-color);
          margin-top: _get-size-config($size, gap-content);
        }

        .#{$prefix}__icon {
          margin-bottom: _get-size-config($size, gap-below-icon);
        }

        .#{$prefix}__actions {
          margin-top: _get-size-config($size, gap-below-content);
        }
      } @else {
        .#{$prefix}__container {
          flex-direction: row;
          gap: spacing.semantic-variable(gap, tight);
        }
      }
    }
  }

  &__container {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  &__description {
    margin: 0;
  }

  &__icon {
    align-items: center;
    color: $icon-color;
    display: flex;
    justify-content: center;
  }

  &__title {
    margin: 0;
  }
}