import {
  ImageSlider,
  ImageLayer,
  Divider,
} from "@/components/ui/image-comparison";

<ImageSlider className="h-96 w-full overflow-hidden rounded-xl">
  <ImageLayer
    src="/path/to/before-image.jpg"
    alt="Before Image"
    layer="first"
  />
  <ImageLayer src="/path/to/after-image.jpg" alt="After Image" layer="second" />
  <Divider />
</ImageSlider>;
 
{
  /* Vertical orientation with custom handle icon */
}
<ImageSlider
  className="h-96 w-full overflow-hidden"
  orientation="vertical"
  defaultPosition={40}
>
  <ImageLayer src="/path/to/original.jpg" alt="Original" layer="first" />
  <ImageLayer src="/path/to/edited.jpg" alt="Edited" layer="second" />
  <Divider handleIcon={<ArrowUpDown size={16} />} />
</ImageSlider>;
 
{
  /* Hover-controlled comparison */
}
<ImageSlider
  className="h-96 w-full overflow-hidden rounded-xl"
  hoverControl={true}
  defaultPosition={20}
>
  <ImageLayer src="/path/to/before.jpg" alt="Before" layer="first" />
  <ImageLayer src="/path/to/after.jpg" alt="After" layer="second" />
  <Divider width={4} handleSize={32} />
</ImageSlider>;