import type { JSX } from 'solid-js';
import { For } from 'solid-js';

import type { Toast } from '@/primitives/createToasts';
import { linkButton } from './styles';

interface Props {
  toasts: Toast[];
  onDismiss: (id: number) => void;
}

/** The toasts, stacked in the bottom right corner with the newest lowest. */
export function ToastList(props: Props): JSX.Element {
  return (
    // The stack lets clicks through to the page; only the toasts take them.
    <div class="pointer-events-none fixed right-4 bottom-4 z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2">
      <For each={props.toasts}>
        {(toast) => (
          <div
            class="pointer-events-auto flex items-start justify-between gap-4 rounded-md border border-line bg-danger-soft px-3.5 py-2.5 text-danger shadow-[0_8px_24px_rgb(0_0_0/0.18)]"
            role="alert"
          >
            <span>{toast.message}</span>
            <button
              type="button"
              class={linkButton}
              aria-label={`Dismiss: ${toast.message}`}
              onClick={() => props.onDismiss(toast.id)}
            >
              Dismiss
            </button>
          </div>
        )}
      </For>
    </div>
  );
}