Image Comparison

import { ImageComparison } from "@/components/ui/image-comparison";

export default function DemoOne() {
  return (
    <div className="mx-auto max-w-4xl p-6 space-y-8">
      <h1 className="text-2xl font-semibold tracking-tight">Image Comparison Demo</h1>
      <p className="text-gray-600 dark:text-gray-400">Drag the handle or use the keyboard to compare images.</p>

      {/* 16:9 example */}
      <div className="aspect-[16/9] w-full">
        <ImageComparison
          beforeSrc="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop"
          afterSrc="https://images.unsplash.com/photo-1470770903676-69b98201ea1c?q=80&w=1600&auto=format&fit=crop"
          beforeAlt="Before"
          afterAlt="After"
          initialPosition={0.5}
          orientation="horizontal"
          className="w-full h-full"
        />
      </div>

      {/* Vertical example */}
      <div className="aspect-[16/9] w-full">
        <ImageComparison
          beforeSrc="https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=1200&auto=format&fit=crop"
          afterSrc="https://images.unsplash.com/photo-1756758005190-92941d91b8b2?q=80&w=1200&auto=format&fit=crop"
          beforeAlt="Before"
          afterAlt="After"
          initialPosition={0.4}
          orientation="vertical"
          className="w-full h-full"
        />
      </div>
    </div>
  )
}