(* Button Demo - Showcasing GADT-based button interface *)

open Htmlit
open Tailwind_html

let create_button_demo () =
  let html = El.html [
    El.head [
      El.meta ~at:[At.charset "utf-8"] ();
      El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
      El.title [txt "Button Demo"];
      El.link ~at:[At.rel "stylesheet"; At.href "button_demo.css"] ();
    ];
    El.body ~at:[classes_attr [
      min_height screen;
      bg_color (gray 50);
      padding (rem 2.0);
    ]] [
      container [
        h1 ~styles:[
          font_size `Xl3;
          font_weight `Bold;
          text_color (gray 800);
          text_center;
          margin_bottom (rem 2.0);
        ] [txt "Button Component Demo"];
        
        p ~styles:[
          font_size `Lg;
          text_color (gray 600);
          text_center;
          margin_bottom (rem 3.0);
        ] [txt "Showcase of built-in button components using GADT interface"];

        (* Primary buttons section *)
        card [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Primary Buttons"];
          
          div ~styles:[
            flex;
            flex_col;
            margin_bottom (rem 1.0);
          ] [
            btn_primary ~size:`Sm [txt "Small Primary"];
            btn_primary [txt "Default Primary"];
            btn_primary ~size:`Lg [txt "Large Primary"];
          ];
        ];

        (* Secondary buttons section *)
        card [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Secondary Buttons"];
          
          div ~styles:[
            flex;
            flex_col;
            margin_bottom (rem 1.0);
          ] [
            btn_secondary ~size:`Sm [txt "Small Secondary"];
            btn_secondary [txt "Default Secondary"];
            btn_secondary ~size:`Lg [txt "Large Secondary"];
          ];
        ];

        (* Outline buttons section *)
        card [
          h2 ~styles:[
            font_size `Xl;
            font_weight `Semibold;
            text_color (gray 700);
            margin_bottom (rem 1.5);
          ] [txt "Outline Buttons"];
          
          div ~styles:[
            flex;
            flex_col;
          ] [
            btn_outline ~size:`Sm [txt "Small Outline"];
            btn_outline [txt "Default Outline"];
            btn_outline ~size:`Lg [txt "Large Outline"];
          ];
        ];
      ];
    ];
  ] in
  html

let () =
  let html = create_button_demo () in
  print_string (El.to_string ~doctype:true html)