"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  ResponsiveModal,
  ResponsiveModalContent,
  ResponsiveModalDescription,
  ResponsiveModalFooter,
  ResponsiveModalHeader,
  ResponsiveModalTitle,
  ResponsiveModalTrigger,
} from "./responsive-modal";

export function ResponsiveModalDemo() {
  return (
    <div className="flex flex-col space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <ResponsiveModal>
          <ResponsiveModalTrigger asChild>
            <Button variant="outline">Bottom Modal (Default)</Button>
          </ResponsiveModalTrigger>
          <ResponsiveModalContent>
            <ResponsiveModalHeader>
              <ResponsiveModalTitle>Bottom Modal</ResponsiveModalTitle>
              <ResponsiveModalDescription>
                This modal slides up from the bottom on mobile and appears
                centered on desktop.
              </ResponsiveModalDescription>
            </ResponsiveModalHeader>
            <div className="py-4">
              Modal content goes here. This is the default behavior.
            </div>
            <ResponsiveModalFooter>
              <Button type="submit">Save changes</Button>
            </ResponsiveModalFooter>
          </ResponsiveModalContent>
        </ResponsiveModal>

        <ResponsiveModal>
          <ResponsiveModalTrigger asChild>
            <Button variant="outline">Top Modal</Button>
          </ResponsiveModalTrigger>
          <ResponsiveModalContent side="top">
            <ResponsiveModalHeader>
              <ResponsiveModalTitle>Top Modal</ResponsiveModalTitle>
              <ResponsiveModalDescription>
                This modal slides down from the top on mobile.
              </ResponsiveModalDescription>
            </ResponsiveModalHeader>
            <div className="py-4">
              Modal content that appears from the top on mobile.
            </div>
          </ResponsiveModalContent>
        </ResponsiveModal>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <ResponsiveModal>
          <ResponsiveModalTrigger asChild>
            <Button variant="outline">Left Modal</Button>
          </ResponsiveModalTrigger>
          <ResponsiveModalContent side="left">
            <ResponsiveModalHeader>
              <ResponsiveModalTitle>Left Modal</ResponsiveModalTitle>
              <ResponsiveModalDescription>
                This modal slides in from the left on mobile.
              </ResponsiveModalDescription>
            </ResponsiveModalHeader>
            <div className="py-4">
              Modal content that appears from the left side.
            </div>
          </ResponsiveModalContent>
        </ResponsiveModal>

        <ResponsiveModal>
          <ResponsiveModalTrigger asChild>
            <Button variant="outline">Right Modal</Button>
          </ResponsiveModalTrigger>
          <ResponsiveModalContent side="right">
            <ResponsiveModalHeader>
              <ResponsiveModalTitle>Right Modal</ResponsiveModalTitle>
              <ResponsiveModalDescription>
                This modal slides in from the right on mobile.
              </ResponsiveModalDescription>
            </ResponsiveModalHeader>
            <div className="py-4">
              Modal content that appears from the right side.
            </div>
          </ResponsiveModalContent>
        </ResponsiveModal>
      </div>
    </div>
  );
}