import * as React from 'react';

import { cn } from '@/utils/cn';

type ImagePlaceholderProps = React.ComponentPropsWithoutRef<'div'>;

export function ImagePlaceholder({
  className,
  ...props
}: ImagePlaceholderProps) {
  const patternId = React.useId().replace(/:/g, '');

  return (
    <div
      data-orientation='vertical'
      data-slot='root'
      className={cn(
        'bg-bg-white-0 border-stroke-soft-200 relative flex rounded-lg border',
        className,
      )}
      {...props}
    >
      <div
        data-slot='container'
        className='relative flex flex-1 flex-col gap-x-8 gap-y-4 p-4 sm:p-6 lg:grid'
      >
        <div className='border-stroke-soft-200 relative flex aspect-video items-center justify-center overflow-hidden rounded-sm border border-dashed px-4'>
          <svg
            aria-hidden='true'
            className='stroke-neutral-alpha/16 absolute inset-0 h-full w-full'
            fill='none'
          >
            <defs>
              <pattern
                id={patternId}
                x='0'
                y='0'
                width='10'
                height='10'
                patternUnits='userSpaceOnUse'
              >
                <path d='M-3 13 15-5M-5 5l18-18M-1 21 17 3' />
              </pattern>
            </defs>
            <rect
              stroke='none'
              fill={`url(#${patternId})`}
              width='100%'
              height='100%'
            />
          </svg>
        </div>
      </div>
    </div>
  );
}