'use client';
import Wrapper from '@/components/common/Wrapper';
import { ImageProps } from '@/types/common';
import NextImage from 'next/image';
import React from 'react';

export function Image({ src, alt, aspectRatio, styling, sectionId }: ImageProps) {
  return (
    <Wrapper styling={styling} className='w-full flex justify-center' id={sectionId}>
      <div
        className='relative'
        style={{
          width: styling?.width ? `${styling.width}px` : '500px',
          aspectRatio: aspectRatio ?? '1/1',
        }}
      >
        <NextImage src={src ?? ''} alt={alt ?? ''} fill style={{ objectFit: 'cover' }} loading='lazy'  />
      </div>
    </Wrapper>
  );
}

Image.displayName = 'Image';
