<script lang="ts">
  import { MediaType } from '$lib/constants';
  import RadioButton from '$lib/elements/RadioButton.svelte';
  import { Text } from '@immich/ui';
  import { t } from 'svelte-i18n';

  interface Props {
    filteredMedia: MediaType;
  }

  let { filteredMedia = $bindable() }: Props = $props();
</script>

<div id="media-type-selection">
  <fieldset>
    <Text class="mb-2" fontWeight="medium">{$t('media_type')}</Text>

    <div class="mt-1 flex flex-wrap gap-x-5 gap-y-2">
      <RadioButton name="media-type" id="type-all" bind:group={filteredMedia} label={$t('all')} value={MediaType.All} />
      <RadioButton
        name="media-type"
        id="type-image"
        bind:group={filteredMedia}
        label={$t('image')}
        value={MediaType.Image}
      />
      <RadioButton
        name="media-type"
        id="type-video"
        bind:group={filteredMedia}
        label={$t('video')}
        value={MediaType.Video}
      />
    </div>
  </fieldset>
</div>
