<script lang="ts">
  import { cleanClass } from '$lib';
  import { Icon } from '@immich/ui';
  import { mdiImageBrokenVariant } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { ClassValue } from 'svelte/elements';

  interface Props {
    class?: ClassValue;
    hideMessage?: boolean;
    width?: string | undefined;
    height?: string | undefined;
  }

  let { class: className, hideMessage = false, width = undefined, height = undefined }: Props = $props();
</script>

<div
  data-broken-asset
  class={cleanClass(
    '@container flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
    className,
  )}
  style:width
  style:height
>
  <div class="hidden @min-[75px]:block">
    <Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full min-w-6 min-h-6" />
  </div>
  {#if !hideMessage}
    <span class="text-center text-xs @min-[100px]:text-sm @min-[150px]:text-base">{$t('error_loading_image')}</span>
  {/if}
</div>
