---
import Button from "~ui/button/Button.astro"
import type { ButtonSize, ButtonVariant } from "~ui/button/buttonCva"
import { classesTextGray } from "~ui/text/classesTextGray"
import { classArr } from "~ui/utils/classArr"
import Modal from "./Modal.astro"

interface Props {
  button: {
    title?: string
    text?: string
    variant: ButtonVariant
    size?: ButtonSize
    icon?: string
    iconRight?: string
    iconClass?: string
    class?: string
  }
  close?: {
    text?: string
    variant?: ButtonVariant
    size?: ButtonSize
    class?: string
    icon?: string
    iconClass?: string
  }
  id?: string
  title?: string
  titleClass?: string
  class?: string
  classContentArea?: string
}
const p = Astro.props

/**
 * Generates a random alphanumeric string ID
 *
 * Uses Math.random() converted to base-36 to create a string of letters and numbers.
 * The substring(2, 11) removes the "0." prefix and takes 9 characters for a good balance
 * of uniqueness and brevity (approximately 10^36 possible combinations).
 *
 * @returns {string} A 9-character random alphanumeric string
 */
function generateRandomId(): string {
  return Math.random().toString(36).substring(2, 11)
}

const id = p.id ?? `modal-id-${generateRandomId()}`
const button = p.button
const title = p.title ?? "Dialog Title"
const classContentArea = p.classContentArea
---

<Button id={id} {...button} />
<Modal
  triggerId={id}
  title={title}
  titleClass={classArr(classesTextGray, "text-xl", "mb-2", p.titleClass)}
  class={p.class}
  classContentArea={classContentArea}
  close={p.close}
>
  <slot />
</Modal>