import Image01 from "../../components/partials/grid-images/image01";
import Image02 from "../../components/partials/grid-images/image02";
import Image03 from "../../components/partials/grid-images/image03";

export default function ImagesPage() {
  return (
    <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
      <div className="space-y-5 sm:space-y-6">
        {/* Responsive Image Section */}
        <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">
              Responsive image
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <Image01 />
          </div>
        </div>

        {/* 2 Grid Images Section */}
        <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">
              Image in 2 Grid
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <Image02 />
          </div>
        </div>

        {/* 3 Grid Images Section */}
        <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">
              Image in 3 Grid
            </h3>
          </div>
          <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
            <Image03 />
          </div>
        </div>
      </div>
    </div>
  );
}