<.modal
  id="modal-header-types-default"
  description="A standard modal with default header styling"
  title="Default Modal"
  header_type="default"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Default Modal" {attrs} />
  </:trigger>
  <p>This is a basic modal with default header styling.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Cancel" variant="secondary" />
      </:action>
      <:action>
        <.button label="Confirm" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-types-icon"
  description="Modal with custom icon in header"
  title="Custom Icon Modal"
  header_type="icon"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Icon Modal" {attrs} />
  </:trigger>
  <:header_icon>
    <.mail />
  </:header_icon>
  <.text_input id="email" name="email" value="" type="email" label="Email" required placeholder="hello@tuist.dev" />
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Cancel" variant="secondary" />
      </:action>
      <:action>
        <.button label="Send" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-types-success"
  description="Operation completed successfully"
  title="Success"
  header_type="success"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Success Modal" {attrs} />
  </:trigger>
  <p>Your operation has been completed successfully!</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Close" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-types-info"
  description="Important information about this action"
  title="Information"
  header_type="info"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Info Modal" {attrs} />
  </:trigger>
  <p>Here's some important information you should know before proceeding.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Got it" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-types-warning"
  description="This action requires your attention"
  title="Warning"
  header_type="warning"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Warning Modal" {attrs} />
  </:trigger>
  <p>This action may have consequences. Please review before continuing.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Cancel" variant="secondary" />
      </:action>
      <:action>
        <.button label="Continue" variant="destructive" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-types-error"
  description="Something went wrong"
  title="Error"
  header_type="error"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Error Modal" {attrs} />
  </:trigger>
  <p>An error occurred while processing your request. Please try again.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Retry" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>

<.modal
  id="modal-header-sizes-small"
  description="This description won't be shown because header size is small"
  title="Small Header"
  header_type="default"
  header_size="small"
>
  <:trigger :let={attrs}>
    <.button label="Small Header" {attrs} />
  </:trigger>
  <p>Modal with small header - description is not displayed.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Close" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-header-sizes-large"
  description="This description is visible because header size is large"
  title="Large Header"
  header_type="default"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Large Header" {attrs} />
  </:trigger>
  <p>Modal with large header - description is displayed below the title.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Close" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>

<.modal
  id="modal-footer-variations-no-footer"
  description="This modal has no footer section"
  title="Modal Without Footer"
  header_type="default"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="No Footer" {attrs} />
  </:trigger>
  <p>This modal doesn't have a footer. Users can close it using the X button in the header.</p>
</.modal>
<.modal
  id="modal-footer-variations-single-action"
  description="Modal with only one action button"
  title="Single Action"
  header_type="success"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Single Action" {attrs} />
  </:trigger>
  <p>This modal has only one action in the footer.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Got it" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
<.modal
  id="modal-footer-variations-multiple-actions"
  description="Modal with several action buttons"
  title="Multiple Actions"
  header_type="warning"
  header_size="large"
>
  <:trigger :let={attrs}>
    <.button label="Multiple Actions" {attrs} />
  </:trigger>
  <p>This modal demonstrates multiple action buttons in the footer.</p>
  <:footer>
    <.modal_footer>
      <:action>
        <.button label="Save Draft" variant="secondary" />
      </:action>
      <:action>
        <.button label="Cancel" variant="secondary" />
      </:action>
      <:action>
        <.button label="Publish" />
      </:action>
    </.modal_footer>
  </:footer>
</.modal>