import Button1 from "../../ui/buttons/button1";
import Button2 from "../../ui/buttons/button2";
import Button3 from "../../ui/buttons/button3";
import Button4 from "../../ui/buttons/button4";
import Button5 from "../../ui/buttons/button5";
import Button6 from "../../ui/buttons/button6";

const ButtonsPage = () => {
  return (
    <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
      <div className="space-y-5 sm:space-y-6">
        {/* Primary Button */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Primary Button
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button1 />
          </div>
        </div>

        {/* Primary Button with Left Icon */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Primary Button with Left Icon
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button2 />
          </div>
        </div>

        {/* Primary Button with Right Icon */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Primary Button with Right Icon
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button3 />
          </div>
        </div>

        {/* Secondary Button */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Secondary Button
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button4 />
          </div>
        </div>

        {/* Secondary Button with Left Icon */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Secondary Button with Left Icon
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button5 />
          </div>
        </div>

        {/* Secondary Button with Right Icon */}
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div className="px-6 py-5">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              Secondary Button with Right Icon
            </h3>
          </div>
          <div className="border-t border-gray-100 px-6 py-6.5 dark:border-gray-800">
            <Button6 />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ButtonsPage;