'use client';

// imports and type Props

export const OptimizedImage = ({ alt = '', className = '', image, ...props }: Props) => {
  const [isLoading, setIsLoading] = useState(true);

  (image as ImageWithAltType).asset.metadata.lqip;

  // Image source according `typeof`
  const src =
    typeof image === 'string'
      ? String(image)
      : imageBuilder
          .image(image)
          .auto('format')
          .format('webp')
          .quality(95)
          .fit('clip')
          .maxWidth(1920)
          .url();

  // Blurred image to show while loading
  const blurDataURL =
    typeof image === 'string' ||
    (typeof image === 'object' && !(image as ImageType).asset.metadata.lqip)
      ? generateBlurPlaholder(234, 83, 41)
      : (image as ImageType).asset.metadata.lqip;

  // Size props (`width` and `height`) if the image isn't fill the container
  const sizeProps = Object.hasOwn(props, 'fill')
    ? {}
    : {
        height: 600,
        width: 1080,
      };

  return (
    <NextImage
      {...props}
      {...sizeProps}
      alt={imageHasAlt(image) ? image.alt : alt}
      blurDataURL={blurDataURL}
      loading="lazy"
      onLoadingComplete={() => setIsLoading(false)}
      placeholder="blur"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 40vw"
      src={src}
      className={cn([
        'object-cover aspect-[16/9]',
        { 'blur-2xl bg-zinc-50/80': isLoading },
        className,
      ])}
    />
  );
};

'use client';

export const Testimonial = ({ body, className = '', client, image, role, video }: Props) => (
  <div
    className={cn([
      'container grid grid-cols-1 gap-4 md:max-w-screen-md md:grid-cols-testimonial-md md:gap-8 lg:max-w-screen-md lg:gap-16 xl:max-w-screen-lg xl:grid-cols-testimonial',
      className,
    ])}
  >
    <figure
      data-aos="fade-right"
      className={cn([
        'relative isolate min-h-[400px] overflow-hidden rounded-lg shadow shadow-zinc-900/20',
      ])}
    >
      <OptimizedImage fill className="-z-1 object-cover object-center" image={image} />

      {!!video && (
        <div className="absolute bottom-4 right-4">
          <VideoModal video={video}>
            <button className="group inline-flex items-center gap-4 rounded-full bg-zinc-900 py-2 pl-4 pr-8 text-sm text-zinc-100 transition-all duration-300 ease-in-out hover:bg-zinc-950 hover:text-zinc-50">
              <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700/20 transition-all duration-300 ease-in-out group-hover:bg-zinc-600/30">
                <Icon category={SpriteCategories.ACTIONS} name="play" size="sm" />
              </span>
              Ver Testemunho
            </button>
          </VideoModal>
        </div>
      )}

      <figcaption className="sr-only">{image.alt}</figcaption>
    </figure>

    {/*...*/}
);

      <OptimizedImage fill className="-z-1 object-cover object-center" image={image} />